jQuery屬性選擇器單擊

Question

我正在嘗試選擇具有特定屬性的div 。 我想div被點擊只有在有特定的attribute與true價值。問題是，如果我點擊div再次提醒仍顯示，而它的attribute與false值。

的HTML

<a href="#" data-spinner="true">Click Here</a>

jQuery的

$("a[data-spinner='true']").click(function() {
        $("a[data-spinner='true']").attr("data-spinner",false);
    alert("clicked");
});

Answer 1

當前代碼的問題是，當元素具有屬性時，您將附加事件。 之后更改屬性的事實不會刪除該事件處理程序，因此始終會調用它。

有幾種方法可以解決此問題。

第一種是使用委托事件處理程序，該事件處理程序將始終考慮當前屬性值：

$(document).on('click', 'a[data-spinner="true"]', function() {
    $(this).attr("data-spinner", false);
    alert("clicked");
});

另一種方法是檢查單擊處理程序本身內的屬性狀態：

$("a[data-spinner]").click(function() {
    if ($(this).data('spinner')) {
        $(this).data('spinner', false)
        alert("clicked");
    });
});

請注意，此方法允許您使用data()方法，這是更好的做法。

您也可以在第一次單擊時使用off()刪除事件處理程序，或僅使用one()附加事件-取決於頁面中設置data屬性值的其他邏輯。

Answer 2

當您更改data-spnner的值時，jQuery不會重新聲明該事件。 您必須改為以編程方式處理該問題，如下所示：

$("a[data-spinner]").click(function() {
    var $this = $(this);

    if($this.data('spinner')){
        alert("clicked");
    }

    $this.data('spinner',false);    
});

Answer 3

我要在Rory McCrossan的回答中添加一點，相應於此 ，您還應該使用removeAttr取消設置屬性：

$("a[data-spinner='true']").removeAttr("data-spinner");