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();
});

jQuery没有检测到当前的类

1 个答案: