暂时暂停事件处理

Question

我使用一个函数一次将代码绑定到多个元素。在我的应用程序的其他位置，我想在某些情况下暂停此绑定，并在其他情况下恢复它。这是我的代码：

function populate_modal(x) {
    var button_id = '#button_page' + x;
    var page_id = '#course_intro_page' + x;
    $(button_id).on('click', function() {   
        var a = $(page_id).html(); 
        $('.fadeandscale_inner').html(a); 
    });
}
for (i = 0; i < 5; i++) { 
    populate_modal(i);
}

如何实现我想要的？它应如下所示：

if (condition) {
    // suspend all code associated with "#button_page" buttons, and bind some other code to these buttons
}
else {
    // switch back to default code associated with buttons
}

Answer 1

你可以有一个泛型类，以便能够处理所有的按钮，但是还可以在发生绑定时添加类。

检查这个：

function populate_modal(x) {
    var button_id = '#button_page' + x;
    var page_id = '#course_intro_page' + x;
    //add class to handle event bind removal
    $( button_id ).addClass( 'bindedButton' );
    $(button_id).on('click', function() {   
        var a = $(page_id).html(); 
        $('.fadeandscale_inner').html(a); 
    });
}
for (i = 0; i < 5; i++) { 
    populate_modal(i);
}
if (condition) {
    $( '.bindedButton' ).off( 'click' );
}
else {
    for (i = 0; i < 5; i++) { 
       populate_modal(i);
    }
}