Question

在onepager网站上，我实现了一个可以作为叠加层使用的livesearch。结果显示如下：

<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输出有一些冲突 - 因为如果我测试没有覆盖，一切都有效。

有人可以帮助我或知道什么是错的？

谢谢+最好的问候托马斯

Answer 1

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

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

将您的代码段改为此应该可以解决问题：

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

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

与查询实时搜索重叠冲突

1 个答案: