javascript - jQuery 不检测当前类

Question

我有一个 JavaScript 函数，我可以在其中更改按钮的类 (<a href="..." class="button" id="placeOrdersButton">Button</a>):

function showOrderButtonActive(isActive) {
        if (isActive) {
            $("#placeOrdersButton").addClass("button");
            $("#placeOrdersButton").removeClass("buttonDisabled");
        } else {
            $("#placeOrdersButton").removeClass("button");
            $("#placeOrdersButton").addClass("buttonDisabled");
        }

我还有一个 JavaScript 函数，可以在单击已启用的按钮时显示加载面板:

$("a:not([target='_blank'], [class='buttonDisabled'])").on("click", function (e) {
        window.LoadingPanel.Show();
    });

但是当我的 JavaScript 函数将类更改为 buttonDisabled 时它仍然显示加载面板。

为什么 jQuery 不检测当前的类名，我怎样才能以最好和最简洁的方式做到这一点？

Answer 1

代码运行如下:

// [1] Retrieve all elements that match the selector *at the existing time*
$("a:not([target='_blank'], [class='buttonDisabled'])")

// [2] Attach a click event to those elements
.on("click", function (e) {
    window.LoadingPanel.Show();
});

所以如果一个元素的类改变了，它不会影响上面的代码。上面的代码已经运行并将事件附加到给定的元素。

一个解决方案是 event delegation ，您将事件附加到父元素并在事件期间检查选择器:

// [1] Retrieve document
$(document)

// [2] Attach a click event to the document that will fire
//     if and only if the event started at or bubbled up through
//     the given selector
.on("click", "a:not([target='_blank'], [class='buttonDisabled'])", function (e) {
    window.LoadingPanel.Show();
});