Question

我此刻有一个大脑放屁，很可能是因为深夜。任何人，我在ajax调用之后都有文档前面的内容。我正在尝试将click事件分配给这些前置但未触发的元素。在静态html中重新创建元素。

Jquery的

$('.row').click(function() {
    $(this).children('.slide2').stop().slideToggle(200);
})


$('<div class="row"><div class="main"><div class="split6">'
                         + data.some + '</div><div class="split6">' 
                         + data.some + '</div><div class="split6">' 
                         + data.some + '</div><div class="split6">'
                         + data.some + '</div><div class="split6">'
                         + data.some + '</div><div class="split6">'
                         + data.some + '</div></div><div class="slide2"><span>Info: '
                         + data.some + '</span><span>Info: '
                         + data.some + '</span><span>Info: '
                         + data.some + '</span></div></div>').prependTo('#results').hide().slideDown(500);

Answer 1

使用

$('#results').on('click','.row', function() {
    $(this).children('.slide2').stop().slideToggle(200);
})

您需要使用Event Delegation动态创建元素。您必须使用委托事件方法来使用.on()。

即

$(document).on('event', 'selector', callback_function)

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

Answer 2

您需要使用 event delegation ，因为您的.row已在此处动态添加：

$('body').on('click','.row', function() {
    $(this).children('.slide2').stop().slideToggle(200);
})

事件委派将帮助您将click事件附加到这些新创建的.row元素。

Answer 3

你应该使用delegate

$(document).on("click",".row",function(){
   $(this).children('.slide2').stop().slideToggle(200);
});

它可以帮助您为未来元素附加处理程序

在prependto之后点击事件？

3 个答案: