函数在Jquery

时间:2018-03-11 21:30:22

标签: javascript jquery delegates

我有一些结果通过Ajax容器中的#results和其他内容加载,#last_results中的内容相同(此内容不带ajax)。适用于#last_results的相同脚本在#results中无效,我认为由于它们没有绑定。

HTML

 <ul id="results"></ul>

     <ul id="last_results">
                    <li class=showLb>[click to show LightBox]</li>
                    <li class=showLb>[click to show LightBox]</li>
                    <li class=showLb>[click to show LightBox]</li>
    </ul>

JQUERY 这是一个基本的Jquery脚本:

   $('.showLb').on('click',function(e){
           alert('Show LightBox');

       });

此脚本在页面li中工作,但不在加载的Ajax li中。我知道我必须delegate或使用on,如何

2 个答案:

答案 0 :(得分:0)

你走了。现在,我的偏好是要求你真正去检查这个改变的作用。请记住,我们随时为您提供帮助。

&#13;
&#13;
$('.results').on('click', '.showLb' ,function(e){
        alert('Show LightBox');
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="results"></ul>

     <ul id="last_results">
                    <li class=showLb>[click to show LightBox]</li>
                    <li class=showLb>[click to show LightBox]</li>
                    <li class=showLb>[click to show LightBox]</li>
    </ul>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您必须在执行ajax调用后直接定义on click方法。

$.ajax({
...
success: funtion(data){
       //your code
       $('.showLb').on('click',function(e){ alert('Show LightBox'); });
}
...