Question

我正在努力缩小我的问题，但我现在需要发布我的问题！

我有代码，当你点击一个标签时，会出现一个div，这是我的一个例子。

<div class="row bottom-buffer">
    <a href="#" class="person">Teste, Man</a>
</div>
<div class="contactInfo well-sm custom-well">
    <!-- lots of content loaded from an external page (development_fetch.php) -->
</div>

以下jQuery：

j$('.person').click(function(e) {
    j$(this).closest('.row').next().slideToggle();
});

此代码的作用是，当您点击人名，例如Teste，Man时，将显示.contactInfo的内容。它以前工作过，但是由于人数众多，我最近不得不实施分页，在javascript中我有这段代码：

j$("#results").load("development_fetch.php", {'page':0}, function() {
            j$("#1-page").addClass('active');
        });  
j$(".paginate_click").click(function (e) {
            j$("#results").empty(); 
            j$("#results").prepend('<div class="loading-indication"><img src="/assets/loader.gif" /></div>');
            var clicked_id = j$(this).attr("id").split("-"); 
            var page_num = parseInt(clicked_id[0]); 
            j$('.paginate_click').removeClass('active'); 
            j$("#results").load("development_fetch.php", {'page': (page_num-1)}, function(){
            });
            j$(this).addClass('active'); 
            return false; 
        });

我不确定分页代码中的返回false是否阻止了a.person执行它应该执行的操作。我尝试删除它但无处可去。任何帮助将不胜感激！

note - 从外部页面加载.contactInfo的内容。注意 - 如果我输入控制台j$(".person").closest('.row').next().slideToggle();，它可以正常工作。

Answer 1

j$("#results").load("development_fetch.php",...

^这是创建执行此jQuery时不存在的元素：

j$('.person').click(function(e) {
    j$(this).closest('.row').next().slideToggle();
});

它添加的元素不知道该指令。

您需要将点击绑定到确实存在且未被覆盖的最近的祖先，即#results，但是使用{{{} {{}}将事件委托给.person 1}}通过以下方式：

.on()

jQuery中可能存在冲突问题

1 个答案: