覆盖与查询实时搜索冲突

overlay conflict with query live search

本文关键字：搜索 冲突 实时 查询 覆盖      更新时间：2024-05-15

在一个onepager网站上，我实现了一个实时搜索，它可以作为覆盖。结果如下所示：

<div style="display: block;" id="LSResult">
<ul id="LSShadow">
    <li><a owl="sl23" slide="5" rel="sl23#6" class="clk_s">Team</a></li>
    <li><a owl="sl22" slide="9" rel="sl22#10" class="clk_s">Trust Services</a></li>
</ul>

点击功能如下所示：

 $('.clk_s').click(function() {
            alert("click");
            $('.search_ov').fadeOut();
})

不幸的是，如果我点击结果链接，什么都不会发生。我不知道，但overlay/livesearch输出肯定有一些冲突——因为如果我在没有overlay的情况下进行测试，一切都会正常工作。

有人能帮我吗？或者知道出了什么问题吗？

谢谢+问候thomas

问题是，您正在绑定到尚不存在的元素上的click事件。由于事件是在页面加载时绑定的，但搜索函数会在那之后呈现.clk_s元素，因此它们永远不会触发事件处理程序。

解决此问题的一种方法是将处理程序绑定到父对象上，例如<body>，并在匹配选择器的子对象上触发事件时激发处理程序。这样，您只绑定了一个事件处理程序，它将在任何.clk_s上触发，无论它们何时添加到文档中。

将你的代码段更改为这个应该可以做到：

$('body').on('click', '.clk_s', function () {
  alert("click");
  $('.search_ov').fadeOut();
});

有关jQuery的on()函数的更多信息：http://api.jquery.com/on/

相关文章：