Question

这与Click event doesn't work on dynamically generated elements

有关

基本上我试图点击

展开折叠的区块引用

replyfix($('#element'));//In the original data, the expander works as intented 

$.ajax({
    url : pageurl,
    success : function (source) {
        $('#element').after(replyfix($(source).find('#element')));
    }
});

function replyfix(reply){
    reply.find('blockquote blockquote').addClass('collapsed').append('<a href="javascript:;" class="expander">click</a>').children('div').hide();
    reply.find('.expander').one('click', function(){
        $(this).parent().find('div').show();
        $(this).parent().find('.expander').remove();
    });
    return reply;
}

我的问题是该对象应该已经在ajax请求中创建，并且我每次创建时都绑定新数据。为什么直接绑定不起作用？

起初我以为我在代码中做错了所以我试图确认我使用

在新创建的对象上绑定了一个事件

console.log($._data(reply.find('.expander')[0], "events"));

它表明新的扩展器已经绑定了一个点击事件。

更新：上面的代码是我之前使用过的代码，我想了解它为什么不起作用。

$('#element').on('click', ".expander", function(){
    $(this).parent().find('div').show();
    $(this).parent().find('.expander').remove();
});

已经解决了这个问题。

Answer 1

改为使用委托。例如。但是使用需要在ajax调用之前预定义，即使元素尚未添加。确保你像下面的身体绑定。

$('body').delegate('ajax added element','click',function(e){
   //do something
})

jquery中的其他绑定对ajax生成的元素不起作用。这就是代表派上用场的地方。因此，首先尝试理解jquery委托绑定。

Answer 2

直接绑定确实可以作为测试代码

console.log($._data(reply.find('.expander')[0], "events"));

确认存在绑定。

在我的非简化代码中，我使用以下代码来避免直接插入时出现问题

.after($.parseHTML(replyFix($(this)).wrap('<p/>').parent().html()))

而不是直接

.after(replyFix($(this)))

这导致重新解析HTML，创建新对象，根本没有绑定。测试发生在replyfix中，其中重新解析没有发生，它显示的绑定在原始解析replyFix($(this))时丢失。

Click事件不适用于ajax生成的元素

2 个答案: