Question

我在使用jquery添加它之后尝试调用jquery函数。这是我的代码（这已经在document.ready中）：

  $("#addrow").on("click",function() {
    alert("made it");
    //$('#moduletable tr:last').after('<tr class="child"'+table_length+'><td>info</td><td></td><td></td></tr>');
    table_length += 1;

  });

  $("input[name='module_type']").change(function(){
    var content = "";

    //content += '<a href="javascript:void(0);" id="addrow">Add row</a>';
    content += '<br><br>';
    content += '<table id="moduletable" style="width:100%">';
    content += '<tbody>';
    content += '<tr>';
    content += '<td align="center">Question</td><td align="center">Header</td><td align="center">Content</td>';
    content += '</tr>';
    content += '</tbody>';
    content += '</table>';

    $("#content").html(content);


  });

问题在于

    content += '<a href="javascript:void(0);" id="addrow">Add row</a>';

如果我在加载函数时将其写入html页面，则调用该函数。如果我在页面加载后添加此链接，则不会。

Answer 1

检查http://api.jquery.com/delegate/

正确的方法是： $（document）.delegate（＆＃34; #addrow＆＃34;，＆＃34;点击＆＃34;，回调）;

Answer 2

我不是jQuery专家，但我相信你没有将这个功能分配给任何元素。

来自jQuery Documentation：

.on（）方法将事件处理程序附加到jQuery对象中当前选定的元素集

当您致电$("#addrow").on( ... )时，没有符合查询#addrow的元素，这意味着“当前选定的元素集”为空，即$("#addrow").length == 0

解决方案是在创建元素之后设置事件，或者将事件分配给仅在指定元素被定位时触发的父级。当您通过html创建元素时，先前不适用。

后者将（正如user1663189所述）使用.delegate()代替，将“将处理程序附加到与现在或将来匹配选择器的元素” 。 Rayon Dabre还指出您可以使用可选参数.on(event [, selector])并将侦听器分配给父元素以获得相同的结果。

使用jquery添加链接后从链接调用jquery函数

2 个答案: