jQuery 1.7 .on() Ereignis Delegation nicht mit Wahl sieht funktioniert wie folgt auf behinderte Element

Question

Mein HTML (nicht dynamisch):

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

Dies funktioniert:

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

Dies gilt nicht :

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

die $("#domain").attr("disabled", "disabled"); Anruf Entfernen stellt die Funktionalität des $(document).on() d Eleganz, so scheint es Ereignisse nicht Blase, wenn ein Element deaktiviert ist, unabhängig davon, wie das Ereignis ausgelöst wird (d. h. weder von .trigger noch .triggerHandler noch durch Benutzerinteraktion). Ich verstehe jedoch nicht warum, da keiner der beiden Handler etwas zurückgibt oder Aufrufe vornimmt, um die Ereignisausbreitung zu verhindern, und in der jQuery-Dokumentation wird nicht erwähnt, dass das Attribut "disabled" Auswirkungen auf die Propagierung hat. Was fehlt mir hier?

Answer 1

Haben Sie versucht, die Ereignisse so wie Namensräume:

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

Sie auch aus dem Körper befestigt, um versuchen möchten. Ich habe mehr Glück mit diesem hat:

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

Hier ist eine Geige von dem auf Veranstaltung deutlich zu arbeiten. Es sei denn, ich verstehe nicht, was "arbeiten" eigentlich für das OP bedeutet.

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

Answer 2

einfach Ihr Problem zu reproduzieren ich das folgende Snippet erstellt (die Schaltfläche Click Me verwendet wird, um das Änderungsereignis auslösen, nur eine vollständige Demo haben):

$(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>

Ich habe die removeAttr bei Domain Change Event deaktiviert, um den Fehler zu reproduzieren.

Mit jQuery 1.7 funktioniert das Dokument über die Änderung nicht wie Sie immagine.

Lassen Sie uns nun das Dokument auf Änderung auf mit einem allgemeinen Dokument ändern und lassen Sie uns die Veranstaltung Ziele filtern:

$(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>

Jetzt haben Sie ein anderes Verhalten zu sehen, genau das, was Sie suchen.

Natürlich ist es nicht die beste Lösung, es ist nur eine Möglichkeit, das Problem zu lösen.

Ich warte auf andere Ideen, weil meine Lösung nur ein Workaround ist.

Wenn Sie interessiert sind, mehr Informationen zu erhalten, können Sie einen Blick auf die jQuery nehmen

dispatch: function(event) {

im Quellcode jQuery 1.7 Aufmerksamkeit auf „gesperrt“ Wort.