web-dev-qa-db-fra.com

Utilisation de jQuery pour déclencher un événement html onclick

<input type="text" id="test_value" name="test_value" value="xyz" />
<input id="test_default" name="test_default" type="checkbox" onclick="with(this.form.elements['test_value']) { disabled = this.checked; if (this.checked) { value = ''; } else {if(value=='') {value=' '; value = '';}}};" />

Le inline onclick est généré par un cms sur lequel je n'ai aucun contrôle de . Je veux exécuter $("#test_default").click(); avec jQuery mais cela ne fonctionne pas car il n'est pas lié au gestionnaire d'événements jQuery.

J'ai essayé des variantes de

$("#test_default").click(function (e) {
                    $(e.target).attr("onclick").apply(checkbox, [e]);
                    return false;
                }).click();

mais sans succès. S'il vous plaît aider.

Merci.

Il y a des dizaines de fonctions différentes qui peuvent être en ligne dans le onclick. Ce n'est pas vraiment une option pour les dupliquer et les exécuter en parallèle.

Les réponses fonctionnent dans une petite démo mais pas dans l'environnement réel. Veuillez regarder http://jsfiddle.net/GtJjt/ J'ai besoin que la case à cocher soit déclenchée par programme.

Bizarrement, seul $("#metadata_field_text_10190_default")[0].click(); déclenche l'événement correctement. Quelqu'un peut-il expliquer cela?

javascriptjqueryjavascript-events
28
Simon

Appelez le onclick du DOM natif directement ( voir la démo ):

$("#test_default")[0].onclick();

Ou, sans jQuery du tout,

document.getElementById("test_default").onclick();

Mettre à jour:

Le problème actuel est lié à l'interaction entre .click() de jQuery et le code onclick en ligne. La fonction .click() de jQuery fait en réalité deux choses: elle first déclenche tous les gestionnaires d'événements, y compris le code inline onclick, then elle active la case à cocher.

Le problème se pose car le code en ligne teste si la case à cocher est cochée. Comme cela est déclenché en premier, le code détecte que la case à cocher n'est pas cochée et ne fait rien. Maintenant, lorsque cela est terminé, jQuery vérifie ensuite la case à cocher.

Comment réparons nous ça? Nous vérifions d'abord la case à cocher manuellement, puis appelons le gestionnaire inline. Malheureusement, nous ne pouvons pas utiliser la fonction .click() de jQuery pour appeler le gestionnaire inline, car la case à cocher sera désélectionnée (elle appellera également d'autres gestionnaires d'événements liés à jQuery si vous les ajoutez ultérieurement, vous ne voudrez probablement pas cela). Par conséquent, nous utilisons la méthode DOM native que j'ai décrite précédemment, car son seul effet est d'exécuter le code en ligne.

Le code final est ceci:

$("#metadata_field_text_10190_default").attr("checked", true)[0].onclick();

Voir la démo: http://jsfiddle.net/GtJjt/3/ . (J'ai inclus un console.log dans le code en ligne de la démonstration pour prouver que le code en ligne était en cours d'exécution. Supprimez-le si votre navigateur n'est pas Firefox ou Chrome ou il tomberait en panne).

Actualiser à nouveau:

Je n'avais pas vu votre solution plus tôt Simon, merci de me rappeler de [0].click(). Il s'agit essentiellement de l'équivalent natif de la fonction .click() de jQuery, qui fonctionne comme il l'a été décrit ci-dessus (cochez d'abord la case à cocher, puis appelez le code en ligne). Un avertissement cependant: ceci appellera également tous les gestionnaires d’événements liés à jQuery, ce qui peut ne pas être ce que vous voulez.

39
David Tang

Il suffit de ne pas return false et ça va s'appeler:

$("#test_default").click(function (e) {
  //hi!
}).click();

Si vous souhaitez empêcher une action par défaut, utilisez e.peventDefault() , qui ne tuera pas l'événement. De plus, en ce qui concerne votre gestionnaire onclick en ligne (pourquoi ne pas le faire discrètement all?), Il est fortement déconseillé d'utiliser with.

2
Nick Craver

J'ai utilisé le déclencheur en HTML avec l'événement onclick comme suit:

$("#test_default").trigger("onclick");
2
borchvm

J'utilise le code suivant:

$("your_selector")[0].click();

Dans ton cas:

 $("#test_default")[0].click();
0
Juan Carlos Velez