Question

我遇到了两个绑定到同一元素的事件的问题。基本上，一个事件绑定到所有复选框，一个事件绑定到特定的复选框（带#ID）。它们同时触发，但我希望首先运行特定于ID的事件代码。

这两个事件在同一时刻触发，但我希望在在常规复选框事件中单击“搜索”按钮之前执行＃valid_only的事件：

.on('change', '#search-form input:checkbox', function() { $('#reset').button('enable'); $('#search').trigger('click'); }).on('change', '#valid_only', function() { $('input:hidden[name="valid"]').val($(this).is(':checked') ? true : ''); $('input:hidden[name="total"]').val($(this).is(':checked') ? '' : true); if (!$('#stats td[data-tag="months_to_expiry"], #stats td[data-tag="expired"]').hasClass('current')) { $('#stats td[data-tag="valid"]').toggleClass('e', !$('#valid_only').is(':checked')).toggleClass('current', $('#valid_only').is(':checked')); $('#stats td[data-tag="total"]').toggleClass('e', $('#valid_only').is(':checked')).toggleClass('current', !$('#valid_only').is(':checked')); } });

Answer 1

在JavaScript中“同时”没有任何事情发生 - 它（大多数情况下）是单线程的。事件将在处理程序注册顺序中完全触发。

因此，您需要在#valid_only之前注册#search-form input:checkbox。

你可能需要在更具体的处理程序中调用event.stopPropagation()，以确保事件不会冒泡到更通用的处理程序中。

Answer 2

不要依赖于此。在代码中强制执行顺序：

.on('change', '#search-form input:checkbox', function() {
    if ( $(this).id() === 'valid_only' ){
        updateVisibilityValid( $(this).is(':checked') );
    }

    $('#reset').button('enable');
    $('#search').trigger('click');
}

Answer 3

为什么不把第二部分放到某个函数中，然后在'＃search-form input：checkbox'函数完成它的工作后，只需调用该函数：

.on('change', '#search-form input:checkbox', function() {
    $('#reset').button('enable');

    $('#search').trigger('click');
    foo_function();
});

function foo_function(){/* second part of "on change" */}

绑定两个事件，控制执行顺序

3 个答案: