2

我的 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()委托的功能，因此当元素被禁用时，事件似乎不会冒泡，无论事件是如何触发的（即既不是通过.trigger也不.triggerHandler是通过用户交互）。但是，我不明白为什么，因为处理程序都没有返回任何内容或进行任何调用以防止事件传播，并且 jQuery 文档没有提到“禁用”属性对传播有任何影响。我在这里想念什么？

4

2 回答 2

2

只是为了重现您的问题，我创建了以下代码段（Click Me 按钮用于触发更改事件，只是为了获得完整的演示）：

$(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 中，关于更改的文档不像您想象的那样工作。

现在让我们使用通用文档更改文档，然后过滤事件目标：

$(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中注意“禁用”一词。

于 2016-03-02T19:58:25.160 回答
-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/

于 2012-04-11T01:55:33.907 回答