Question

我在Jquery点击时遇到了一个小问题。在页面加载时，我们从数据库中显示一些内容。我的意思是启动代码放在html所在的同一个文件中（这将在用户第一次搜索时被删除，因为在搜索到搜索位置后，清单所在的列表项将被清除结果）。
当您单击其中一个项目时，会出现一个包含一些信息的弹出菜单。

现在问题：
在页面上，我们还有一个搜索栏，用于搜索数据库中的内容。按搜索后，您将获得搜索结果列表。它与页面加载时的HTML代码相同，但这次Jquery没有检测到点击。

HTML：

<div class="list-item" data-singer= <?php echo '"'.$name.'"' ?> >
        <div class="row">
                <div class="name"><?php echo $name ?></div>
                <div class="tags">
                        <div class="tag"><?php echo $tag ?></div>
                </div>
        </div>
    <div class="row">
            other info
    </div>
</div>

Jquery的：

$('.list-item').click(function(){
  alert();
  name = $(this).data('singer');
  name_modified = name.replace(" ", "_");
  $(name_modified).ready(function(){
    $('.popup > .content').empty();
    $('.popup > .content').load('singers/' + name_modified + '.xml');
    $('.popup').slideDown(500);
  });
});

js代码还有另一个问题，但是当我解决这个问题时，我已经很高兴了。如果您需要更多信息，请发表评论，我会添加。

向downvoters发送消息。请发表评论。

Answer 1

您必须使用事件委派，我不知道您将加载项目的容器的ID，但您可以在我的示例中替换它：

$('#parent').on('click', '.list-item', function(){
  alert();
  name = $(this).data('singer');
  name_modified = name.replace(" ", "_");
  $(name_modified).ready(function(){
    $('.popup > .content').empty();
    $('.popup > .content').load('singers/' + name_modified + '.xml');
    $('.popup').slideDown(500);
  });
});

这样你的#parent就会将click事件委托给所有的孩子，即使他们是以dinamically方式加载的。

Answer 2

因为click事件永远不会绑定到元素。您需要在加载新内容时使用绑定元素或使用事件委派。

$(document).on("click", '.list-item', function(){ ...

Answer 3

重新加载页面时，是否有任何JS工作？如果没有，那么您的JS代码中可能有另一个错误，该错误与此代码无关，导致该项无法触发。

此外，您应该尝试使用＆＃34; .on＆＃34;。这将允许JS监听添加到DOM的项目：

$('body').on("click", '.list-item', function(){
  alert();
  name = $(this).data('singer');
  name_modified = name.replace(" ", "_");
  $(name_modified).ready(function(){
    $('.popup > .content').empty();
    $('.popup > .content').load('singers/' + name_modified + '.xml');
    $('.popup').slideDown(500);
  });
});

在显示搜索结果后，Jquery没有检测到点击

3 个答案: