Pourquoi mon jquery .on('change') ne fonctionne pas pour l'ajouter dynamiquement sélectionne

Je suis en ajoutant sélectionnez les éléments de façon dynamique, comme dans le dessous de HTML. Je ne suis pas sûr pourquoi, la .sur (le "changement"...) n'est pas de travail pour la dynamique de la sélectionner. Ce qui me manque?

Je suis en utilisant google Chrome 24.0.1312.57 + jquery 1.8.3.

<script type="text/javascript">
  $(document).ready(function() {
      $('#x select').on('change', function () { alert('helo'); })
      $('#y select').on('change', function () { alert('helo'); })

      $('#x').html($('#y').html());
  });
</script>

<div id="x"></div>
<div id="y">
    <select>
        <option>O1</option>
        <option>O2</option>
    </select>
</div>

InformationsquelleAutor jaime | 2013-02-18

jquery

31

Votre code:
```
$('#x select').on('change', function () { alert('helo'); })
```
attache un gestionnaire d'événement pour la sélectionner à l'intérieur de la #x élément.

Ce que vous voulez (de ce que j'ai compris) c'est quelque chose dans le genre de:
```
$("#y").on('change','select',function () { alert('helo'); });
```
Cette attache un gestionnaire d'événement à l' #y de l'élément qui est déléguée à ses enfants", sélectionnez " éléments

De http://api.jquery.com/on/

L' .sur() la méthode d'attache des gestionnaires d'événement de la série d'éléments dans l'objet jQuery.
- Qui a fait le tour, merci!
- C'est étrange, mais, depuis l' #y jamais fait de changements. Seulement il est contenu html est copiée sur l'autre élément. Pourquoi faut-il le feu à changer dans ce cas?
InformationsquelleAutor cernunnos
9

Événement se liant à des éléments qui ne sont pas dans les DOM sur le chargement initial de la page ne fonctionne pas. Vous avez besoin de se lier à un élément de plus le DOM qui existe pour permettre à l'événement de descendre. C'est généralement l'approche que je prends:
```
$(document).on({
  change: function() {
    alert('helo');
  }
}, '#x select');

$(document).on({
  change: function() {
    alert('helo');
  }
}, '#y select');
```
Je préfère que vous le pouvez ajouter des événements subséquents facilement.
```
$(document).on({
  change: function() {
    alert('helo');
  },
  blur: function() {
    alert('helo');
  }
}, '#x select');
```
- Ou la plus récente de la syntaxe $(document).on('change', '#x select', function() { alert('hello'); });
InformationsquelleAutor d_ethier
3

Votre événement de liaison est définie sur $(document).ready(). Toutefois, si vous ajouter dynamiquement plus tard (via jQuery.appendTo() par exemple), le nouvellement ajouté, doit être appliqué, car ils ne faisaient pas partie de le premier une qui s'est passé dans le $(document).ready(), qui ne fonctionne que lorsque la page est chargée et que le DOM est d'abord fait.

InformationsquelleAutor CodeChimp

Syntaxe correcte:

 $('#x').on(
        'change', 
         'select', 
          function () { 
            alert('helo'); 
          }
       );

Donc la syntaxe de on() pour élément dynamique semble:

$(staticParent).on( eventName, target, handler);

InformationsquelleAutor thecodeparadox

1

Le point de l'ensemble de l' .sur() est de sorte que vous pouvez lier l'événement à autre chose que le document. C'est ce que le désormais amortis .live() l'a fait et il est inefficace dans la plupart des cas. Vous êtes décidé à lier l'événement le plus proche parent de l'élément qui ne seront pas modifiés dynamiquement.

Autant que je suis conscient de cela est la bonne syntaxe:
```
$('#x').on('change', 'select', function(){
    alert('hello');
});
```
Si #x #ou y sera changé, enveloppez-les sur un élément et lier l'événement pour que.

InformationsquelleAutor jamesbat.es

C'est facile. Quelle que soit la classe ou l'id de votre ciblage, essayez d'être plus précis, mais pas besoin d'inclure un super parent.

Exemple de la mauvaise façon:

JS:

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

FAÇON CORRECTE:

JS:

        $('#tablecontent').on('change', 'table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

Avis j'ai abandonné la super-parent: "#tablecontent'

Tout au sujet de la clarté.

InformationsquelleAutor VickenCode

JS:

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

JS:

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

JS:

        $('#tablecontent').on('change', 'table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

JS:

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

InformationsquelleAutor Dominic

1

Le mot entre crochets est le texte qui est affiché si le navigateur ne peut pas afficher l'image. Assurez-vous de comprendre un texte alternatif pour les logiciels de lecture d'écran.
- $('#x').on('change', function(){ alert('bonjour'); });
InformationsquelleAutor Dominic
0

Ne pas utiliser .live()/.bind()/.delegate(), cependant. Vous devriez utiliser .on().

pour à la fois statique et dynamique, sélectionnez changements
```
$(document).on('change', 'select', function (e) {
    //do something 
});
```
InformationsquelleAutor user889030

Vous devez vous connecter pour publier un commentaire.