jquery - 单击动态加载的 div 以显示另一个 div

Question

我在下面有这个 jQuery 代码：

$.each(data.direct, function (filelist, direc) {
                $('#magazines-list').append ( $('<li>').append ('<p>'+ direc.slice(47) + '</p>') );
            });

那么这个

$("body").delegate("#magazines-list li p",'click', function () {
    $('#magazine-show').fadeIn(500);
    $('#magazine-show').css({width: $(window).width(), height: $(window).height()});
    $('#magazine-show').append( '<p class="magazine-show-caption">' + $(this).text() + '</p>');
});

问题是当我点击一个' #magazines-list li p'时，该方法被触发两次，因此我得到了两次标题。

Answer 1

你需要这样做：

$("#magazines-list").on("click","li > p", function () {
    $('#magazine-show').fadeIn(500);
    $('#magazine-show').css({width: $(window).width(), height: $(window).height()});
    $('#magazine-show').append( '<p class="magazine-show-caption">' + $(this).text() + '</p>');
});

• 使用on代替delegate
• 这里，$("#magazines-list")是父包装。
• p当单击父包装器内的任何内容时，将调用上述函数。