Changement événement onclick javascript de jquery cliquez sur et encore de passer des paramètres
Je pense que j'ai peut-être raté quelque chose ou n'ont pas compris fondamental de jQuery. J'ai cherché pendant des heures mais pas encore trouvé une réponse à ma question.
J'ai un vieux site que je me suis mise à niveau pour utiliser jQuery et de nombreux liens appeler un JavaScript onClick
appel qui passe de plusieurs paramètres, comme dans l'exemple ci-dessous:
<a href="#" onclick="displayData('Book Title', 'ISBN', 'dateOfPublishing', 'Price');">View Details</a>
Le problème est que j'ai mis à jour l'ancien displayData
fonction avec différents jQuery code et le displayData
fonction au sein de la
$(document).ready(function() {
});
code, et cela semble empêcher la fonction displayData
être appelée à l'aide de la onClick
comme il est dit objet attendu. J'ai déplacé le displayData
fonction de la $(document).ready()
, mais, ce faisant, cela a empêché les références à d'autres fonctions au sein de la $(document).ready()
code référencé.
Un coupé exemple de ce que j'ai, c'est ci-dessous:
<script>
$(document).ready(function() {
function displayData(title, isbn, dt, price) {
//there's a call to jQuery AJAX here
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServices/BookService.asmx/GetBookReviews",
data: "{isbn: '" + isbn + "'}",
dataType: "json",
success: function(msg) {
DisplayReviews(msg.d);
}
});
return false;
}
function DisplayReviews(data) {
//data normally formatted here and passed to formattedData variable
var formattedData = FormatData(data);
$('#reviewScreen').html(formattedData);
}
function FormatData(data) {
//function reformats data... code removed for space..
return data;
}
});
</script>
<table>
<tr><td><a href="#" class="reviewLink" onclick="displayData('Book Title', '1234141HABJA1', '2010-01-12', '$15.99');">View Reviews</a></td><td>Book Title</td></tr>
<tr><td><a href="#" class="reviewLink" onclick="displayData('Book TItle 2', '516AHGN1515', '1999-05-08', '$25.00');">View Reviews</a></td><td>Book Title 2</td></tr>
</table>
Ce que je voudrais faire est de retirer le onclick="displayData();"
dans le lien et au lieu de nous un jQuery cliquez sur référence, quelque chose comme
$('a.reviewLink').click(function() {
displayData(parameters go here....);
});
Je ne sais pas comment je ferais passer les paramètres à la fonction à partir du lien qu'elles ne sont pas plus dans le code HTML onclick
attribut.
Si je continue à utiliser le onclick
attribut dans le lien, et déplacer le displayData(params)
de la $(document).ready()
bloc de code, il fonctionne très bien, mais au moment où j'essaie de référence et toute autre fonction au sein de la $(document).ready()
bloc de code je obtenir le redouté objet attendu erreur avec les autres fonctions telles que DisplayReviews(param)
.
Je ne sais pas si ce fait aucun sens.... désolé si c'est confus, je ne suis pas le meilleur des mondes programmeur et ne pas connaître la terminologie nécessairement, ont donc essayé du mieux que je peux expliquer. J'espère que vous pouvez aider.
Merci beaucoup
- pouvez-vous modifier le HTML ou avez-vous besoin d'extraire les paramètres à partir de l'existant
onclick
attribut? - Je peux modifier le HTML, je n'étais pas sûr de coller avec le onclick ou d'essayer et de mieux utiliser jQuery et d'en extraire les paramètres d'une autre façon. Le code HTML est généré dynamiquement, donc les paramètres nécessaires sont ajoutés à cette époque, c'est pourquoi j'ai utilisé pour utilisé l'attribut onclick. Merci!
- Vous pouvez créer le code JavaScript nécessaire (à savoir la fixation du gestionnaire de clic) de manière dynamique.
- Je vais jeter un oeil à la fixation du gestionnaire de clic de manière dynamique, mais ne aime l'idée de l'HTML5 BGerrissen se réfère.
Vous devez vous connecter pour publier un commentaire.
Le code d'initialisation de la .ready(), pas de votre bibliothèque de fonctions, celles-ci peuvent être définies dans un autre .fichier js.
Une alternative de passer inline paramètres sans l'aide de javascript en ligne, est d'utiliser HTML5 'données' attribut sur les balises. Vous pouvez l'utiliser en xhtml, html etc et il fonctionne, tout simplement.
html:
jquery:
Remarque: Vous devez utiliser du jQuery
.attr()
ou natif.getAttribute()
méthode de récupérer les données des valeurs.- Je utiliser des données-moi tout le temps.
Comme l'a souligné Skilldrick,
displayData
n'a pas besoin d'être définie à l'intérieur de votre document prêt wrapper (et probablement ne devrait pas être).Vous avez raison de vouloir utiliser le jQuery cliquez sur l'événement de cession plutôt que onClick il rend votre code plus facile à lire, et qui est requis par le principe de Javascript Discret.
Comme pour les paramètres que vous souhaitez passer, il existe quelques façons d'aller sur la tâche. Si vous n'êtes pas concerné avec XHTML conformité, vous pouvez simplement mettre quelques attributs personnalisés sur votre lien et ensuite y accéder à partir de votre script. Par exemple:
Et puis dans votre cliquez sur l'événement:
Je suis sûr que quelqu'un sur ici souligner que la méthode la plus sombre de mal, mais il a bien fonctionné pour moi dans le passé. Sinon, vous pouvez suivre chaque lien avec une cachée ensemble de données, comme suit:
Créer une règle CSS pour masquer la liste de données:
.book-data { display: none; }
, et puis dans votre cliquez sur l'événement:Il y a beaucoup de moyens pour accomplir votre tâche, mais ce sont les deux qui ressort le plus rapidement à l'esprit.
<!DOCTYPE html>
; vos maux de tête disparaissent instantanément, et beaucoup moins cher que le paracétamol.J'ai travaillé cela en place, de sorte que même si la réponse à la question, quelqu'un d'autre pourrait trouver utile.
http://jsbin.com/axidu3
HTML
JavaScript
CSS