jQuery Sur le Clic ne fonctionne pas
Je vais avoir du mal à obtenir mon gestionnaire d'événement à feu. Je vais appeler JSON dans la page comme ci-dessous. Je veux être en mesure de cliquer sur un des boutons que j'ai créé qui va exécuter le 'bonjour' alerte. Il fonctionne avec tous les autres éléments sur la page, mais pas la <button>
.
Peut aider quelqu'un?
test.js
$(document).ready(function() {
$.getJSON('/api/v1/recipe/?format=json', function(data) {
$.each(data.objects, function(i, recipe) {
$('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>');
});
});
$('rmv').on('click', function() {
alert('hello there!');
});
});
recipe.html
{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<form action='' method="post">{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="go baby!">
</form>
</div>
<div class="span6">
<table class="table table-striped table-bordered" id="recipes">
<tr>
<th>Title</th>
<th>Ingredients</th>
<th>Method</th>
<th>Remove</th>
</tr>
</table>
</div>
</div>
</div>
{% block recipes %}{% endblock recipes %}
{% endblock content %}
- ajax est asynchrone.
Vous devez vous connecter pour publier un commentaire.
vous avez le sélecteur de mal, il devrait être
et si vous ajoutez l'élément de façon dynamique, vous devriez l'utiliser comme
votre boucle dans l'ajax de réussite de retour d'appel sera probablement produire des éléments avec id en double, ce qui est faux, de sorte que @Alnitak mentionné, vous pouvez commutateur de sélecteur de classe comme après la modification de la cde
et le sélecteur va ressembler
$('#recipes')
qui assure que l'événement click bulles pas davantage que ce qu'il a à la.De l'essayer. Déplacer ce code à l'intérieur de
callback
OU de l'utilisation de jQuery.sur
Tout d'abord, assurez-vous il n'y a pas plus d'un élément avec l'ID
rmv
. L'ID doit être unique, mais vous semblez être l'ajout de plusieurs recettes, chacun avec leur propre bouton "supprimer".Vous aussi vous avez des problèmes avec votre gestionnaire d'événement d'enregistrement - vous n'êtes pas d'attente pour l'appel AJAX pour finir (et puis ajoutez la ligne du tableau) avant de vous inscrire le gestionnaire d'événement.
Ce problème peut être résolu par l'inscription de la gestionnaire d'événements au sein de l'AJAX
success
de rappel, mais étant donné que le premier problème avec votre pièce d'identité, une meilleure solution serait d'utiliser une classe (.rmv
) au lieu d'un ID et ensuite utiliser:Le code ci-dessus peut être immatriculé à l'extérieur de la
success
de rappel, car il utilise événement délégation. Il s'appuie sur leclick
de remontée d'événements jusqu'à l'affichage de la table (qui existe déjà), au lieu de directement de l'inscription de l'événement sur chacun des boutons, comme ils sont créés.Jquery fonction nécessite un '#' symbole à ajouter si vous utilisez l'id d'un élément déclencheur de tout appel. Ainsi Le Changement
à
Joindre le gestionnaire d'événement dans le succès fonction de votre requête ajax.
Éditer en tant Que par d'autres, votre sélecteur de
rmv
est mauvais, doit être#rmv