在一个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/