0

我遇到了绑定到同一元素的两个事件的问题。基本上，一个事件绑定到所有复选框，一个事件绑定到特定复选框（带有#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'));
    }
});
4

3 回答 3

1

JavaScript 中没有“同时”发生任何事情——它（大部分）是单线程的。事件将完全按照处理程序注册顺序触发。

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

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

于 2013-10-28T09:59:43.283 回答
0

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

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

    $('#reset').button('enable');
    $('#search').trigger('click');
}
于 2013-10-28T09:59:48.060 回答
0

为什么不把第二部分放在某个函数中，在 '#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" */}
于 2013-10-28T10:02:28.780 回答