快捷搜索:   服务器  PHP  安全  IIS  linux 安全

jQuery多个按钮绑定同一个点击事件 响应多个按钮点击请求

在前端页面开发过程中,经常会遇到有多个按钮,需要响应同一个AJAX的点击请求,可以参考下面代码

<div class="div1">
    <ul class="link">
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
    </ul>
    <ul>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
    </ul>
    <ul>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
    </ul>
</div>
<script>
    $(document).ready(function () {
          $('.div1').children('ul').each(function () {
              $(this).find('li').bind('click',function () {
                  alert('im groot');
              });
          })
    });
</script>

以上用bind() 进行事件绑定。但是它有一个问题,动态添加的元素,无法触发这个事件。这就涉及到了事件委托。


delegate(selector,[type],[data],fn) ,bind(type,[data],fn)

jQuery 3.0中已弃用这两种方法,请用 on()代替。


on() 方法在被选元素及子元素上添加一个或多个事件处理程序。


使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。


自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。


 于是只要把上面的bind(),改为on()即可。

    $(document).ready(function () {
        $('.div1').children('ul').each(function () {
            $(this).find('li').on('click',function () {
                alert('im groot');
            });
        })
    });



 


顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论