的jQuery 1.7。對（）事件代表團不選擇禁用的元素上工作

Question

我的HTML（非動態）看起來是這樣的：

<select id="domain" class="marketplace"> 
    <option>United States</option> 
    ... 
</select> 

這工作：

$("#domain").on("change", function() { 
    $("#domain").attr("disabled", "disabled"); 
    /* do ajaxy stuff */ 
    $("#domain").removeAttr("disabled"); 
}); 
$("select.marketplace").on("change", function() { /* do some general stuff */}); 

這不：

$("#domain").on("change", function() { 
    $("#domain").attr("disabled", "disabled"); 
    /* do ajaxy stuff */ 
    $("#domain").removeAttr("disabled"); 
}); 
$(document).on("change", "select.marketplace", function() { /* do some general stuff */}); 

卸下$("#domain").attr("disabled", "disabled");呼叫恢復$(document).on() d的功能因此當一個元素被禁用時，事件不會冒泡，而不管事件是如何被觸發的。既不由.trigger也不由.triggerHandler也不由用戶交互）。然而，我不明白爲什麼，因爲處理程序都不返回任何內容或進行任何調用來阻止事件傳播，並且jQuery文檔沒有提及對傳播有任何影響的「禁用」屬性。我在這裏錯過了什麼？

Answer 1

你試過命名空間的事件，像這樣：

$(document).ready(function() { 
    $("#domain").on("change.eventOne", function() { /* do some specific stuff */ }); 
    $(document).on("change.eventTwo", "select.marketplace", function() { /* do some general stuff */ }); 
}); 

您也可以嘗試從主體附着。我對此有更好的運氣：

$(document).ready(function() { 
    $("#domain").on("change.eventOne", function() { /* do some specific stuff */ }); 
    $('body').on("change.eventTwo", "select.marketplace", function() { /* do some general stuff */ }); 
}); 

這裏是on事件清楚地工作的小提琴。除非我不明白什麼「工作」對OP意味着什麼。

https://jsfiddle.net/szcjszkz/1/

Answer 2

只是爲了重現你的問題，我創建了下面的代碼片段（按鈕點擊我用來觸發改變的事件，只是有一個完整的演示）：

$(document).on("change", "select.marketplace", function (e) { 
 
    $('#result').append('<p>$(document).on("change", "select.marketplace", function (e) {: This does not work!<p/>'); 
 
}); 
 
$(function() { 
 
    $("#domain").on("change", function() { 
 
    $("#domain").attr("disabled", "disabled"); 
 
    /* do ajaxy stuff */ 
 
    //$("#domain").removeAttr("disabled"); 
 
    }); 
 
    $("select.marketplace").on("change", function (e) { 
 
    $('#result').append('<p>$("select.marketplace").on("change", function (e) {: This work!<p/>'); 
 
    }); 
 
    $('#btn').on('click', function (e) { 
 
    $('#domain').trigger('change'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 

 
<button id="btn">Click Me</button> 
 
<select id="domain" class="marketplace"> 
 
    <option>United States</option> 
 
    <option>United States</option> 
 
    <option>United States</option> 
 
    <option>United States</option> 
 
</select> 
 
<div id="result"></div>

我評論了域更改事件中的removeAttr已禁用，以重現錯誤。

使用jQuery 1.7時，文檔在更改上不起作用，就像你immagine一樣。

現在讓我們用一個通用的文件更改更改文檔，讓我們篩選事件的目標：

$(document).on("change", function (e) { 
 
    if ($(e.target).is('select.marketplace')) { 
 
     $('#result').append('<p>$(document).on("change", function (e) {: This works!<p/>'); 
 
    } 
 
}); 
 
$(function() { 
 
    $("#domain").on("change", function() { 
 
    $("#domain").attr("disabled", "disabled"); 
 
    /* do ajaxy stuff */ 
 
    //$("#domain").removeAttr("disabled"); 
 
    }); 
 
    $("select.marketplace").on("change", function (e) { 
 
    $('#result').append('<p>$("select.marketplace").on("change", function (e) {: This work!<p/>'); 
 
    }); 
 
    $('#btn').on('click', function (e) { 
 
    $('#domain').trigger('change'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 

 

 

 
<button id="btn">Click Me</button> 
 
<select id="domain" class="marketplace"> 
 
    <option>United States</option> 
 
    <option>United States</option> 
 
    <option>United States</option> 
 
    <option>United States</option> 
 
</select> 
 
<div id="result"></div>

現在你看到一個不同的行爲，你在尋找什麼。

當然，這不是最好的解決方案，它只是解決問題的一種方法。

我在等待其他想法，因爲我的解決方案只是一種解決方法。

如果您有興趣獲得更多的信息，你可以看看了jQuery

dispatch: function(event) {

在源代碼中jQuery 1.7關注「禁用」字。