0

基本上我试图让一个按钮能够处理元素的编辑。我想要它，以便当我单击Edit按钮时，它将文本更改为Save Changes并添加一个类，然后将按钮绑定到另一个单击事件，以便当他们单击时Save Changes，它会发出警报Saved并将文本更改回Edit. 它完美地完成了一次。如果您继续尝试这样做，它就不会再添加类或更改文本了。

这是关于 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');
        });
    }
});

});​</p>

4

3 回答 3

3

试试这个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');
        }
    });
});
于 2012-04-16T05:10:59.193 回答
1

在调用 off() 后，您永远不会添加回原始处理程序，这会将其删除。

话虽如此，拥有两个按钮和适当的单击处理程序可能更容易，然后使用 hide() 和 show() 来交替使用哪个按钮。对最终用户来说，它的外观和行为应该完全相同，对你来说，编写代码就不会那么令人头疼了。

示例：http: //jsfiddle.net/VgsLA/

我认为最后，这段代码更加健壮和易于管理。

于 2012-04-16T05:08:02.817 回答
1

这只是一个逻辑问题。和$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');
        }
    });

});​

演示

于 2012-04-16T05:28:23.223 回答