Jquery中live支持多次click事件的实例

作者：袖梨 2022-06-25

Jquery中live支持多次click事件的实例如下

Jquery中click事件重复执行的问题

问题：点击修改链接，在弹出的对话框中，点提交按钮，click事件会执行多次。而用原生js则没有问题。
并且提交后，第二次提交后，多个数据都变成一个了。

个人认为原因是：click事件里不能包含click事件？不知道是不是这样。

为方便查看，附带整个文档




Document



css">
    * {margin: 0; padding: 0;}
    #table {border: 1px solid gray; border-collapse: collapse; width: 500px;}
    tr {height: 30px;}
    th {border: 1px solid gray;}
    td {border: 1px solid gray;text-align: center;}
    td a {margin-right: 5px; color: blue; text-decoration: none;}
    #popDiv, #editDiv {border: 1px solid silver; width: 315px; padding: 1px; margin-top: 10px; position: absolute; left: 38%; z-index: 4; display: none;}
    .pop p {height: 30px; margin-top: 20px; clear: both;}
    .pop a {display: block; float: right; text-decoration: none; font-size: 12px;}
    .pop .input {height: 20px; line-height: 20px;}
    /*#bottom {width: 100%; height: 30px; margin: 0 auto;}*/
    #sub {display: block; height: 30px; margin: 0 auto;}
    .mask {background-color: #000; position: absolute; left: 0; top: 0; z-index: 2;}

javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js">


    
        
            姓名
            年龄
            职位
            工资
            操作
        
        
            张三
            23
            PHP
            79999
            修改
        
        
            李四
            21
            Java
            12000
            修改
        
        
            王五
            34
            Python
            29999
            修改
        
        
            赵六
            37
            Javascript
            65450
            修改
        
    
    
        close
        姓名：
        年龄：
        职位：
        工资：

// 点击'修改'链接 $('a.edit').click(function () { var arr = []; $(this).parent().siblings().each(function () { arr.push($(this).text()); }); $('#editDiv').show().find('p').each(function (i) { $(this).find('input:text').val(arr[i]); }); var aTr = $(this); $('#sub').click(function () { alert('2222222'); var data = []; $(this).prevUntil('a.close').each(function () { data.push($(this).find('input:text').val()); }); data.reverse(); aTr.parent().siblings().each(function (i) { $(this).text(data[i]); }); $(this).parent().hide(); $('div.mask').remove(); }); // 原生JS实现点击，没有问题 /*document.getElementById('sub').onclick = function () { alert('1111111'); var data = []; $(this).prevUntil('a.close').each(function () { data.push($(this).find('input:text').val()); }); data.reverse(); aTr.parent().siblings().each(function (i) { $(this).text(data[i]); }); $(this).parent().hide(); $('div.mask').remove(); };*/ // 添加遮罩层 var maskHeight = $(document).height(); var maskWidth = $(document).width(); $('

').appendTo($('body')); $('div.mask').css({ 'width':maskWidth, 'height':maskHeight, 'opacity':0.4 }); }); $('a.close').click(function () { $(this).parent().hide(); $('div.mask').remove(); });

回答一：

已经找到原因了，我提供个方法吧：

$('#sub').unbind('click').click(function () {
...
});

每次绑定前先取消上次的绑定。

回答二：

找了好久，发现原因应该是：

Click事件进行了累加绑定，每当我调用一次时，他便增加一次绑定

按这个方法，确实解决了问题。不知道是否正确。

Jquery中live支持多次click事件的实例

相关文章

精彩推荐