/ / Mettre 'document' vs 'le sélecteur lui-même' dans jQuery? - javascript, jquery, jquery-ui

Mettre 'document' vs 'le sélecteur lui-même' dans jQuery? - javascript, jquery, jquery-ui

Les gars, j'ai 2 questions qui est je pense liées à certains égards, je suppose. Premier:

  1. Quelle est la différence entre ces deux:

    $(document).on("click","#someselector", function() {
    
    //do something
    
    });
    

vs ce

$("#selector")on("click", function(){
/do something
});

Parfois les deux fonctionnent, parfois il ne "t.

Question numéro 2:

J'ai créé un jQuery UI dialogue comme ceci:

function this_dialog(id) {

$("#div-id-for-the-dialog").dialog({
autoOpen            : false,
modal               : true,
draggable           : false,
width               : 400,
buttons         : [{
id      : id,
text    : "Ok"
},{
text    : "Cancel",
click   : function () {
$("#div-id-for-the-dialog").dialog("close");
}
}]
});

}

Comme vous pouvez le constater, l’identifiant est passé à la fonction, beaucoup appellent cette boîte de dialogue et lui transmettent un identifiant unique. L'identifiant ne sera alors attribué qu'à l'utilisateur. Ok bouton.

Donc, quand j'appelle cette fonction pour charger un dialogue unique:

add_section_complete_reopen_dialog("my-unique-dialog-id"); //passing the id
$("#div-id-for-the-dialog").html("I have a unique dialog now? ok?");

Quand j'appuie sur ok avec ce code:

$(document).on("click","#my-unique-dialog-id", function () {
//Do some ajax call here
});

Je reçois cette erreur JS: TypeError: s is undefined Mais l'ajax est réussi. Je veux juste savoir quelle est cette erreur.

Donc, quand je dis que c'est lié à la première question, c'est parce que quand je remplace le code de clic par ceci:

$("#my-unique-dialog-id").on("click", function () {
//Do some ajax call here
});

Cela ne fonctionne plus.

Merci

Réponses:

7 pour la réponse № 1
$(document).on("click", "someselector", function() ...);

est délégation syntaxe. Cela vous permet de lier un gestionnaire à des éléments qui peuvent ne pas exister au moment de l'exécution du code. Voir:

Liaison d'événement sur des éléments créés dynamiquement?

$("someselector").on("click", function() ...);

lie uniquement le gestionnaire aux éléments correspondant au sélecteur au moment où vous exécutez ce code.


0 pour la réponse № 2

J'ai marqué la première réponse correcte parce que je saisJe n'ai pas mis assez d'informations sur la manière de déboguer la deuxième question, mais si quelqu'un rencontrait la même erreur que moi, j'ai découvert pourquoi. Ainsi, lorsque vous initialisez votre boîte de dialogue jQuery UI, procédez comme suit:

function this_dialog(id) {

$("#div-id-for-the-dialog").dialog({
autoOpen            : false,
modal               : true,
draggable           : false,
width               : 400,
buttons         : [{
id      : id,
text    : "Ok"
},{
text    : "Cancel",
click   : function () {
$("#div-id-for-the-dialog").dialog("close");
}
}]
});

}

Assurez-vous d'inclure l'événement click des boutons comme ceci:

fonction this_dialog (id) {

$("#div-id-for-the-dialog").dialog({
autoOpen            : false,
modal               : true,
draggable           : false,
width               : 400,
buttons         : [{
id      : id,
text    : "Ok",
click   : function () {
//include the click event, even if you have nothing to put here.
}
},{
text    : "Cancel",
click   : function () {
$("#div-id-for-the-dialog").dialog("close");
}
}]
});

}