Question

我使用jquery动态添加了一行，作为某些ajax请求的一部分，如：

                        var newRow = $("<tr class='rowItemValid'>");
                        newRow.attr('id', data.user.id);

                        var cols = "";
                        var dob = (data.user.date_of_birth).split('T')
                        cols += '<td>'+data.user.title+'</td>';
                        cols += '<td>'+data.user.first_name+'</td>';
                        cols += '<td>'+data.user.last_name+'</td>';
                        cols += '<td>'+data.user.email+'</td>';
                        cols += '<td>'+dob[0]+'</td>';
                        cols +=  '</ul></div></td>';
                        cols += '<td><a url="/home/"  class="target-click">Edit</a></td>';

                     newRow.append(cols);
                    $('.validTable').append(newRow);

对于添加的行没有发生jquery点击事件。如果单击任何其他行，并且在单击后使用jquery添加的新行，则单击事件适用于添加的行，但不适用于第一次。

我添加了行并按了f5然后添加的行适用于click事件，因此需要重新加载或刷新该部分

如何刷新添加的行？

编辑：点击活动 $（文件）。就绪（

function(){
    $(".target-click").click(

           function(){

               //click task
    }
 );

}）;

Answer 1

您必须使用委派，因为tr是动态生成的元素。

这样的事情：

$('.validtable').on('click', function(e) { 
    var $target = $(e.target);
    if ($target.hasClass('target-click')) { 

        // you check if the element clicked meets your criteria
        ...
        // your click handler code here
    }
});

或者，更好的是：

$('.validtable').on('click', '.target-click', function(e) { 

    // you specify criteria selector as the second argument
    ...
});

一个小例子：http://jsfiddle.net/abhitalks/ZH5kc/

Answer 2

这不是因为你需要刷新原因如下所述 -

第一次加载页面时，jQuery文档就绪了一次，你的表说了4行，所有的事件都是绑定的。因此，它在页面加载时有效。
但是当您添加第5行的动态行时，document.ready不再被调用，因此您用于绑定事件的所有绑定代码都不会再次运行，因此新行具有没有事件绑定到它，因此它不起作用。然后再次加载，（1）发生并且所有工作都按预期工作。

要解决以下问题（任何） -

一个。如果加载不是问题，则在每次添加后加载页面。说 -

windows.location.href = window.location.href

B中。哦，是的，event delegation，可能是我有点落后......谢谢@Yury

$('.validtable').on('click', '.target-click', function(){
    ........
});

Jquery：刷新通过jquery添加的html元素

2 个答案: