J'ai le code suivant en html:
$("#check tr td button").click(function () {
alert('here');
});
Et j'ai le code suivant dans le pied de page:
<table class="table table-striped">
<thead class="inner">
<tr>
<th>Name</th>
<th>Parent</th>
<th>Priority</th>
<th>Action</th>
</tr>
</thead>
<tbody id="check">
<tr>
<td><a href="">test</a></td>
<td>null</td>
<td>0</td>
<td>
<button value="3" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
<tr>
<td><a href="">Lifestyle</a></td>
<td>null</td>
<td>1</td>
<td>
<button value="2" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
<tr>
<td><a href="">Travel</a></td>
<td>null</td>
<td>1</td>
<td>
<button value="1" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
3 Réponses :
L'événement est enregistré avant que les éléments n'existent dans le DOM , c'est pourquoi la fonction n'est pas déclenchée. La solution est de définir le code après votre ajax ou d'utiliser la délégation d'événement comme ci-dessous
$(document).ready(function() {
$(document).on("click", "#check tr td button", function() {
alert('here');
});
});
Rappelez-vous qu'au moment où vous liez l'événement, peut-être qu'à ce moment l'objet $ ("# check tr td button") n'existe pas dans le DOM!
Donc, la solution est l'événement de liaison après ajax fait.
Mettez votre code dans la méthode de réussite de ajax
$(document).on("click", "#check tr td button", function() {
// do something you want here
});
OU vous pouvez utiliser l'événement click du document.
$.ajax({
url: 'url',
data: [],
success: function() {
// render table code
// bind event here
$("#check tr td button").click(function () {
alert('here');
});
}
});
Essayez ceci:
$(document).ready(function() {
$(document).on("click", "#check tr td button", function() {
alert('here');
});
});
OU
$(document).on("click", "#check tr td button", function() {
alert('here');
});