jquery动态绑定具有相同名称的多个元素

最新推荐文章于 2022-10-09 01:14:02 发布

beidaol

最新推荐文章于 2022-10-09 01:14:02 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/beidaol/article/details/87197366

这篇博客探讨了jQuery中动态绑定具有相同名称元素的事件处理程序，推荐使用$.on()方法，因为它结合了.bind(), .live() 和 .delegate() 的优势。文章详细解释了.on()方法的工作原理，包括如何阻止事件冒泡和处理动态创建的元素。同时对比了$.click()和$(document).on('click', '选择器', function() {})的区别，指出后者对于动态添加元素的点击事件处理更为适用。" 126917931,11398381,Python3基础练习：字符串操作与字符计数,"['Python', '编程练习', '字符串处理']

$(document).on('click','要选择的元素',function(){}）；

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

<tbody>
     <c:forEach items="${list}" var="list">
         <tr>
             <td><input type='checkbox' id='check_item'></td>
             <td>#{list.id}</td>
             <td>#{list.empName}</td>
             <td>#{list.gender}</td>
             <td>#{list.email}</td>
             <td>#{list.deptName}</td>
             <td>
                <button id="aaa" class="btn btn-info btn-sm edit_btn" edi_id="#{list.id}"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
                 <button id="bbb" class="btn btn-danger btn-sm delete_btn" del_id="#{list.id}"><span class="glyphicon glyphicon-trash"></span>删除</button>
             </td>
          </tr>

      </c:forEach>
</tbody>

此时不方便使用$("#id").click();的方式来实现删除操作，可以采用如下方式来操作具有相同ID的操作

//删除单个员工
    $(document).on("click",".delete_btn",function () {
        var empId = $(this).attr("del_id");
        $.ajax({
            url:"${pageContext.request.contextPath }/employee/delEmployee/" + empId,
            type: "DELETE",
            success: function (result) {
                alert(result.msg);
                //回到本页
                to_page(currentPage);
            }
        });
    });

定义和用法

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

1、自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。

$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。

$().delegate()是更精确的小范围的使用事件代理。

$().on()结合了这三个方法的优势摒弃了劣势。

2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
3. 阻止事件冒泡和事件委托的方法：
　　　　A：return false。
　　　　　　在事件的处理中，可以阻止默认事件和冒泡事件。

　　　　B：event.preventDefault()
　　　　　　在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

　　　　C：event.stopPropagation().。
　　　　　　在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

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

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

$().click()和$(document).on('click','要选择的元素',function(){})的不同

jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿$().click()和$(document).on('click','要选择的元素',function(){})来说，都是点击事件的操作，但是也有不同的地方。
　　1. $(选择器).click(fn)
　　　　当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
        $('ul>li').click(function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>

结果如下： 后面动态创建的5和6，没法进行点击事件触发。

　2.$(document).on('click','要选择的元素',function(){})
　　 on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
        $('body').on('click','ul>li',function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>

结果如下： 动态添加的元素也能被点击触发函数。