Pourquoi ne puis-je pas utiliser onClick pour exécuter une fonction dans une fonction jQuery $ (document) .ready?

Je suis nouveau sur Javascript et jQuery. Je veux cliquer sur un bouton et avoir une fonction js exécutée. (Pour cet exemple, c'est juste une alerte, mais c'est en fait une fonction ajax.)

La première alerte apparaît, mais après avoir cliqué sur le bouton, je ne vois jamais la seconde alerte ("l'ai fait"). Il semble que javascript ne pense pas que la fonction doIt() est définie lorsque le bouton est cliqué.

Voici le code correspondant:

$(document).ready(function() 
{ 
    alert('ready'); 

    function doIt() { 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

Source

2010-07-30 jalperin

Il est parce que cette fonction n'est pas dans un contexte global, qui est l'endroit où votre onclick="" le cherche. Vous devez déplacer en dehors de votre document.ready (il est donc pas scope exclusivement à cette fermeture), ou (une meilleure approche de l'OMI) se lient à l'intérieur du document.ready, voici ce que je veux dire par chacun:

Reliure à l'intérieur (retirer votre onclick="" pour cela):

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(doIt); 
    function doIt() { 
    alert('did it'); 
    } 
});

ou la version anonyme (supprimer à nouveau votre onclick=""):

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(function() { 
    alert('did it'); 
    }); 
});

ou le déplacer à l'extérieur (garder votre onclick=""):

$(document).ready(function() { 
    alert('ready'); 
}); 
function doIt() { 
    alert('did it'); 
}

Source

2010-07-30 13:03:44

ou le garder à l'intérieur, mais déclarez-le comme une fonction globale (gardez votre onclick) – Konerak

En fait, je fais les deux, selon les circonstances. Par exemple, j'utilise des fichiers .ascx avec Javascript inclus parfois, et quand je le fais, placer la fonction à l'intérieur limite la portée de la fonction, mais d'autres fois je veux une fonction globale que j'appelle de multiple inclut - dans ce cas, Je déplace la fonction hors de la portée. Donc, ces deux options ont des utilisations. –

Ce que vous devez faire est de lier un événement « click » à l'aide jquery comme ça.

jQuery(document).ready(function($) { 

    $('#my_button').click(function() { 

     alert('i was clicked'); 

    }); 
}); 

<input type="button" id="my_button" value="Go" />

Voici une démonstration en direct de jsFiddle pour vous: http://jsfiddle.net/8A5PR/

Voici la page de manuel pour vous: http://api.jquery.com/click/

Source

2010-07-30 13:03:42

Non, l'onClick est correct. – Konerak

@Konerak Je pense que vous manquez le point, cela vous permet d'extraire la gestion des événements onclick de la balise, et de le mettre dans le javascript avec la fonction, donc vous gérez votre code séparé de votre balisage tandis que la fonctionnalité d'exécution reste le même - pour gérer l'événement de clic de l'élément sur votre page. –

@Mark - Je ne pense pas que @Konerak ait manqué le point du tout. Cette réponse indique que vous devez "* lier un événement click à l'aide de jquery" *. Ce n'est pas correct. La liaison d'événements avec jQuery est une option, mais vous n'avez pas besoin de le faire. – user113716

Vous définissez doIt dans votre document.ready comme une déclaration de fonction.

Soit vous devez utiliser une expression de fonction ou déclarer la fonction de la fonction prête.

$(document).ready(function() 
{ 
    alert('ready'); 

    doIt = function() { //now has global scope. 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

(oui, le onClick est pas vraiment la façon dont jQuery de le faire et devrait probablement être remplacé par un gestionnaire de clic défini dans la fonction prêt, mais il fonctionne et est autorisé.

Source

2010-07-30 13:04:17 Konerak

Êtes-vous sûr que cela fonctionne? 'doIt' est toujours déclaré dans la portée locale. – fearofawhackplanet

Si j'avais mis 'var doIt', vous auriez eu raison. Omettre le 'var' déclare une variable globale. – Konerak

+1 alors pour m'apprendre quelque chose de nouveau alors. Est-ce une fonctionnalité jQuery ou applicable au JavaScript général? – fearofawhackplanet

Qu'est-ce que vous faites en ce moment simplement mettre une fonction doIt() dans un événement window.onload (à toutes fins utiles) Cette fonction ne sera jamais appelée en dehors du document.ready sauf si vous le liez à un élément car il est bloqué à l'intérieur la portée de document.ready

Vous devez déplacer votre fu nction en dehors du document.ready afin qu'il puisse être appelé par des événements extérieurs.

Juste un petit lien pour référence: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Source

2010-07-30 13:06:15

De la documentation: "Avec $ (document) .ready(), vous pouvez obtenir vos événements à charger ou à tirer ou tout ce que vous voulez qu'ils fassent avant le chargement de la fenêtre. " http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready() –

Oh, j'ai fait une erreur alors, je suppose que c'est BEFORE window.onload. –

Pas vraiment une erreur juste de comprendre :) une autre façon de dire c'est "quand le DOM est prêt", afin que la page ne soit pas restituée à 100%, mais le DOM (Document Object Model) est prêt. –

Essayez cette ...

$(document).ready(function() { 


    alert('ready'); 


     $("#Go").submit(function(event) { 
      alert('did it'); 
     }); 

}); 

<input name="Go" id="Go" type="button" value="Go" />

Source

2010-07-30 13:06:21

Peut-être que je suis en retard pour poster réponse réponses coz sont déjà affichés .. Pas de soucis :) –

Javascript a deux types de portée, global et niveau de fonction. Si vous déclarez doIt à l'intérieur d'une fonction, il ne sera pas visible en dehors de la fonction. Il y a quelques façons de le fixer

//just declare the function outside the ready function 
$(function() { 
}); 
function doIt() { alert('did it'); } 

//decare a variable outside the function 
var doIt; 
$(function() { 
    doIt = function() { alert('did it'); } 
}); 

// if you dont use var, variables are global 
$(function() { 
    doIt = function() { alert('did it'); } 
})

Source

2010-07-30 13:07:15

$(document).ready(function() 
{ 
});

est un gestionnaire d'événements pour document.ready, les fonctions à l'intérieur de ce gestionnaire sont dans ce champ d'application.

Une meilleure méthode consiste à insérer un gestionnaire pour votre événement de clic à l'intérieur, puis appelez cette fonction là.

$(document).ready(function() 
{ 
    alert('ready'); 

    $('body input').click(function(){ 
    doIt(); 
    }); 
    function doIt() { 
     alert('did it'); 
    }; 
});

Cela a aussi l'effet secondaire de la suppression du code de votre balisage (une bonne chose) dans ce que vous pouvez supprimer cette onclick de votre balise d'entrée.

Source

2010-07-30 13:07:35

Oui, comme mentionné par d'autres, vous devez vraiment déplacer la fonction en dehors de la déclaration jquery ready. Veuillez également noter que javascript est sensible à la casse, par conséquent vous devez utiliser onClick plutôt que surclic. Cordialement

Source

2010-07-30 13:08:15 Muleskinner

En fait, ce n'est pas javascript. C'est un attribut HTML. 'onclick' fonctionnera très bien, tout comme' oNcLiCk'. – user113716

Pourquoi ne puis-je pas utiliser onClick pour exécuter une fonction dans une fonction jQuery $ (document) .ready?

Répondre

Questions connexes