jquery 将两个单击事件添加到同一个按钮只起一次作用

5n0oy7gb  于 2022-11-29  发布在  jQuery
关注(0)|答案(3)|浏览(227)

基本上,我是想让按钮能够处理元素的编辑。我希望这样,当我点击Edit按钮时,它会将文本更改为保存Changes,并添加一个类,然后将按钮绑定到另一个click事件,这样,当他们点击Save Changes时,它会发出警告“Saved!”,并将文本更改回Edit。它只完成了一次。如果你继续尝试这样做,它不再添加类或更改文本。
Here is a demo on jsfiddle
代码:

$(function() {
    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        $that.text('Save Changes');
        $that.addClass('js-editing');
        if ($that.hasClass('js-editing')) {
            $that.off('click').on('click', $that, function() {
                alert('Saved!');
                $that.text('Edit');
                $that.removeClass('js-editing');
            });
        }
    });
});​
ev7lccsx

ev7lccsx1#

试试这个http://jsfiddle.net/bpD8B/4/

$(function() {
    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        if($that.text()=='Edit'){
          $that.text('Save Changes');
          $that.addClass('js-editing');
        }
        else{
                alert('Saved!');
                $that.text('Edit');
                $that.removeClass('js-editing');
        }
    });
});
khbbv19g

khbbv19g2#

调用off()后,永远不要添加回原来的处理程序,这样会删除它。
也就是说,使用两个按钮,并使用相应的单击处理程序,然后使用hide()和show()来交替使用哪个按钮可能会更容易。对于最终用户来说,它的外观和行为应该完全相同,而对于您来说,编写代码也会少很多麻烦。
示例:http://jsfiddle.net/VgsLA/
我认为最终,这段代码更加健壮和易于管理。

qvtsj1bj

qvtsj1bj3#

这只是一个逻辑问题,而对于$that.off('click').on('click', $that, function() {,你是委托给它自己,这不是你应该做的。
下面是使用您的代码的解决方案:

$(function() {

    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        if ($that.hasClass('js-editing')) {
            alert('Saved!');
            $that.text('Edit');
            $that.removeClass('js-editing');        
        } else {      
            $that.text('Save Changes'); 
            $that.addClass('js-editing');
        }
    });

});​

Demo

相关问题