jquery - JQUERY 'on' 语句不起作用

Question

我有一个简单的按钮，单击该按钮会更改其类。我有第二个脚本试图检测该类被再次点击。

他们需要能够被点击和关闭。

//// 单击存档按钮有效 //// 单击取消存档按钮无效

jQuery 1.9

//// Archive button clicked
$('a.archive_butt').on("click", function() {

    //// Put the li in as an object
    var li = $(this).parent('li');
    var entry_id = $(li).attr('rel');

    //// Add class to the li            
    $(li).addClass('status_archived');

    //// Swap the Archive button for unarchive
    $(this).addClass('unarchive_butt');
    $(this).removeClass('archive_butt');
    $(this).empty();
    $(this).text('Un-Archive');

    return false;
});



//// Un Archive button clicked
$('a.unarchive_butt').on("click", function() {
    alert('Fire');  
    return false;
});

Answer 1

调用时会绑定 click 事件，.on但调用时不存在该类的元素unarchive_butt，因此它永远不会绑定。

你真正想要的是旧的 jQuery.live()功能，它已经过时了，取而代之的是下面的代码：

$('body').on('click', 'a.archive_butt', function() {
    //do stuff
});

$('body').on('click', 'a.unarchive_butt', function() {
    //do stuff
});

Answer 2

就个人而言，我会这样做：

    //// Archive button clicked
$('a.button').on("click", function() {        
    if ($(this).hasClass("archive_butt")){
       $(this).text('Un-Archive');
       //and all other stuff you are doing
    } 
    else{
       $(this).text('Archive');
       //and all the other stuff you are doing...
    }    
    $(this).toggleClass("unarchive_butt").toggleClass("archive_butt");
});

http://jsfiddle.net/7n5tz/

Answer 3

改变

$('a.unarchive_butt').on("click", function() {

到

$('a.unarchive_butt').live("click", function() {

Answer 4

从 1.7 开始，该.live()方法已弃用，不应再使用。

jQuery.on()

从 jQuery 1.7 开始，.on()方法提供了附加事件处理程序所需的所有功能。
...
.on( events [, selector ] [, data ], handler(eventObject) )
...
如果selector省略或为 null，则事件处理程序称为直接或直接绑定。
...
当selector提供 a 时，事件处理程序被称为delegated。
...
委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。

因此，尝试更换：

$('a.unarchive_butt').on("click", function() {
    ...
});

和

$().on("click", "a.unarchive_butt", function() {
    ...
});

这会将您直接绑定的事件转换为委托事件，能够处理类更改和稍后添加到 dom 的对象。