Dynamic jQuery handlers with PHP

JavaScript
1

how can i add event handlers into divs that were created with dynamic class names using php? i mean, i have divs with the names of “danny1”,“danny2”,“danny3”,“john1”,“john2”,“larissa1”,“chloe1”,“chloe2”,“chloe3” and so on…all of them were created in a PHP file using ‘echoes’. is there any way i can dynamically add event handlers to each of these divs?

i tried to add a small jquery snippet within the php loop itself so it will create an handler after printing each div using php’s echoes but it seems like a messy solution for me since it adds loads of javascript code into the source…

    for($i=0;$i<=count(names);$i++) {
    
  echo '<div id="'.$names[$i].$i.'"></div>';
  echo ' $(document).ready(function() {
            ' $( '.$name[$i].$i.').on('click',function() { 
                    $( . '$name[$i].$i.').hide(); })
      });
}

of course the code is just for an example and doesn’t have any real use, but as you can see the loop creates a list of divs with dynamic names depending on the $names array. is there any other more ‘generic’ way to add handlers for all these divs ?

thanks in advance.

2

you don’t have dynamic class names, you have dynamic id names. so your actual code wouldn’t run.

my recommendation, give all elements an (additional) class name and hook up the event through that.

3

oops, i meant class names in the previous message, and not ‘id’, of course, silly me.

is there any way to hook up an event to all div classes that start with ‘xyz’ pattern for example?

4

You missed dot (.) before class name in jQuery code

$('div[class^=xyz]')
5

amazing, thanks!

6

oops , now i see that i won’t serve my purpose as well… since the event will be hooked to all the divs and the the particular one, since im adding a .hide() method inside the hook, i dont want the event will hide all the ‘divnames’ but will hide only the specific one, hence this generic method can’t work for me here :\

7

it can pretty well.

$('.some_class').on('click', function (evt) {
    this.style.display = 'none';
    // or
    evt.currentTarget.style.display = 'none';
});
8

but what is ‘.some_class’ ? all my class names are generated dynamically with PHP echoes, depending on the $_GET arguments… does it mean i gotta add this kind of hook to -every- div ? or what? i still can’t get it…

9 
$('div[class^=xyz]').on('click', function(){ //bind click handler to all divs with class starting with xyz
    $(this).hide(); //hide only div where click event has occurred
});

And I think you don’t need to select divs by “starting with” rule for class
You can just use additional class for that:

echo '<div class="'.$names[$i].$i.' clickable"></div>';

$('.clickable').on('click', function(){ ... });
10

your selector. what ever it will be in the end. demo code does not have to be ready to be copied & pasted.

see also @megazoid’s code, he wrote essentially the same only wrapped up in jQuery.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.