关于事件(eg: click)添加内容后重复的解决方法 以及事件的失效和恢复

事件 click , unbind , bind

作用 通过点击事件添加元素 实现即点击改的功能
问题 重复添加内容,焦点无法自由移动,不能使用鼠标点击,只能使用键盘移动

解决 使用unbind bind

bind :

定义:bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
语法:$(selector).bind(event,data,function)
使用:$('.bak').bind('click',function () { changebak($(this)) });

unbind:

定义:unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
语法:$(selector).unbind(event,function)
使用:e.unbind('click');

将代码串起来:
//具体解决修改的方法

function changebak(e){
    var payback = e.text();
    e.html("");
    e.children('textarea').focus();
    //重点:让click失效,这样就避免了重复添加内容
    e.unbind('click');
    var child = e.children('textarea');
    var that = e;
    child.blur(function() {
        var payback_bak = child.val();
        if(payback_bak == payback){
            that.remove('textarea');
            that.html(payback);
        }else{
            $.ajax({
                url:"{pigcms::U('Store/UpdateBak')}",
                data:{content:payback_bak},
                type:'post',
                dataType:'json',
                success:function(e){
                    alert(e.msg);
                    if(e.status == 1){
                        that.html(payback_bak);
                    }
                    that.remove('textarea');
                }
            })
        }
        //解除click的失效,click可以用了
        $('.bak').bind('click',function () {
            changebak($(this))
        });
    })
}
//第一次点击时触发
$('.bak').on('click',function() {
    changebak($(this))
})

希望可以帮到大家,或者给大家一个思路!!!

你可能感兴趣的:(JavaScript,HTML)