Comment ajouter dynamiquement des fonctions dans html

Question

J'envoie html du côté du serveur au côté client, et dans le côté du client j'attrape le HTML et essaie d'insérer la fonction JS/JQ à lui.

c'est le html:

<div align=center style=background-image:url(/srv/admin/img/announcement/error_dynamic_icon.gif);height:70px;background-repeat:no-repeat;background-position:50% 50%;background-position:50% 50%>. </div> 
<li id=announcement4 class=announcement> 
    <table class=tg> 
     <tr> 
     <th class=tg-031e rowspan=3 style=background-image:url(/srv/admin/img/announcement/maintenance_icon.png);background-position:50% 50%></th> 
     <th rowspan=3 class=border_separator></th> 
     <th class=title_style colspan=2>Title - 3 test</th> 
     </tr> 
     <tr> 
     <td class=tg_text colspan=2>Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. ?no great but music too old found arose. </td> 
     </tr> 
     <tr class=r2> 
     <td class=tg-031e></td> 
     <td class=tg-031e><input id=button4 type=button class=ajax_btn_right value=Confirm ></input><input id=checkbox4 type=checkbox class=ajax_checkbox ></input></td> 
     </tr> 
    </table> 
</li> 
<li id=announcement6 class=announcement> 
    <table class=tg> 
     <tr> 
     <th class=tg-031e rowspan=3 style=background-image:url(/srv/admin/img/announcement/general_message_icon.png);background-position:50% 50%></th> 
     <th rowspan=3 class=border_separator></th> 
     <th class=title_style colspan=2>Title - 5 test</th> 
     </tr> 
     <tr> 
     <td class=tg_text colspan=2>Now led tedious shy lasting females off. Dashwood marianne in of entrance be on wondered possible building. Wondered sociable he carriage in speedily margaret. Up devonshire of he thoroughly insensible alteration. An mr settling occasion insisted distance ladyship so. Not attention say frankness intention out dashwoods now curiosity. Stronger ecstatic as no judgment daughter speedily thoughts. Worse downs nor might she court did nay forth these. </td> 
     </tr> 
     <tr class=r2> 
     <td class=tg-031e></td> 
     <td class=tg-031e><input id=button6 type=button class=ajax_btn_right value=Confirm ></input><input id=checkbox6 type=checkbox class=ajax_checkbox ></input></td> 
     </tr> 
    </table> 
</li> 
<li id=announcement7 class=announcement> 
    <table class=tg> 
     <tr> 
     <th class=tg-031e rowspan=3 style=background-image:url(/srv/admin/img/announcement/external_link_icon.png);background-position:50% 50%></th> 
     <th rowspan=3 class=border_separator></th> 
     <th class=title_style colspan=2>Title - 6 test</th> 
     </tr> 
     <tr> 
     <td class=tg_text colspan=2>Increasing impression interested expression he my at. Respect invited request charmed me warrant to. Expect no pretty as do though so genius afraid cousin. Girl when of ye snug poor draw. Mistake totally of in chiefly. Justice visitor him entered for. Continue delicate as unlocked entirely mr relation diverted in. Known not end fully being style house. An whom down kept lain name so at easy. </td> 
     </tr> 
     <tr class=r2> 
     <td class=tg-031e></td> 
     <td class=tg-031e><input id=button7 type=button class=ajax_btn_right value=Confirm ></input><input id=checkbox7 type=checkbox class=ajax_checkbox ></input></td> 
     </tr> 
    </table> 
</li> 
<div class=footer align=center>Please confirm you have read and acted upon this message</div> 

utilisant jquery ou javascript je veux ajouter à chaque bouton une fonction, la base de leur classe ou id. à l'événement de clic. pour eaxample:

  jQuery.each(all buttons with the class/id name, function(add function to the button) { 
alert('hello world'); 
}); 

Answer 1

Vous devez utiliser un gestionnaire d'événements délégué. Essayez ceci:

$(document).on('click', '#myElement', function() { 
    alert('hello world'); 
}); 

I utilisé document comme sélecteur primaire à titre d'exemple. Vous devez utiliser l'élément le plus proche de ceux ajoutés dynamiquement.

Answer 2

Demo

Vous pouvez utiliser;

$(".class_name").bind("click", function() { 
    // your code here 
});