如何将动态函数添加到html中

时间:2014-05-08 10:25:55

标签: javascript jquery

我从服务器端向客户端发送html,在客户端,我正在捕获html并尝试向其插入JS / JQ函数。

这是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>

使用jquery或javascript我想根据他们的类或id向每个按钮添加一个函数。 点击事件。 例如:

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

2 个答案:

答案 0 :(得分:2)

您需要使用委派的事件处理程序。试试这个:

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

我使用document作为主要选择器作为示例。您应该使用最接近动态附加元素的元素。

答案 1 :(得分:0)

<强> Demo

你可以使用;

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