Question

我有一些结果通过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，如何

Answer 1

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

＆＃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;

Answer 2

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

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

函数在Jquery

2 个答案: