单击动态加载的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>');
});

问题是，当我点击＆{39; #magazines-list li p＆＃39;时，该方法会被触发两次，因此我会获得两次标题。

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时，将调用上述函数。