jquery - Jquery - 更改按钮功能

Question

我是 JQuery 的新手，我正在尝试编写代码来更改文本和功能中的单击按钮。这是代码：

$('.button1').click(
    function() {
        $(this).val('Button2');
        $(this).removeClass('button1').addClass('button2');
    }
);

$('.button2').click(
    function() {
        alert('Button 2 Clicked');
    }
);

问题是，第二个事件不会触发并调用警报。

提前致谢

Answer 1

事件处理程序绑定到元素，更改元素的类不会更改绑定。在您的情况下，您需要使用事件委托。

从 jQuery 1.7 开始，使用.on()它：

$(document).on('click', '.button1', 
    function() {
        $(this).val('Button2');
        $(this).removeClass('button1').addClass('button2');
    }
);

$(document).on('click', '.button2', 
    function() {
        alert('Button 2 Clicked');
    }
);

如果它们有共同的祖先，（比如 a <div id="container">）它可以用来代替document: $('#container').on('click', '.button2', ...。只要每个.button1并且.button2您希望单击事件都在它之下，它就会起作用div。