Je souhaite annuler un gestionnaire d'événements sur ma ligne lorsqu'un clic est effectué sur un bouton de cette ligne - jquery, modal-dialog, datatables

J'utilise des tables de données et j'ai un gestionnaire d'événementsdéfinir de telle sorte que lorsque vous cliquez sur une ligne, une autre page s'ouvre. Cependant, chaque ligne contient un bouton qui ouvrira une boîte de dialogue modale. J'essaie de définir un gestionnaire de clic sur le bouton pour que, lorsque vous appuyez dessus, le nouvel événement de page soit annulé et que le modal s'ouvre à la place. Voici mon code:

$("#table_id tbody").on("click", "tr", function() {
var root = location.protocol + "//" + location.host;
window.location.href = root+"/path";
});

$("#ModalBtn").click(function() {
$("#table_id tbody").unbind();
});

METTRE À JOUR: Voici le reste du script. Je pense que la cause du problème est peut-être la variable datatables. Si je supprime cela, les gestionnaires d’événements fonctionnent correctement, comme dans la démo d’Amin:

var searchTable = $("#table_id").dataTable({
"ajax": "array.php",
"aoColumns": [
null,
null,
null,
null,
{
"mData": null,
"bSortable": false,
"mRender": function(data, type, full) {
return "<button id="ModalBtn" class="btn" data-toggle="modal" data-target="#myModal">Add</button>";
}
}
]
} );

Réponses:

1 pour la réponse № 1

Peut-être que je comprends mal, mais ne compliquez-vous pas les choses ici? Si je comprends bien, vous voulez juste un événement de clic sur la ligne / <tr>, et veut ouvrir une fenêtre contextuelle (peut-être bootstrap?) en cliquant sur le bouton. Mais pas les deux en même temps. Simplement:

$("#table_id tbody").on("click", "tr", function(e) {
if (e.target.id === "ModalBtn") {
return;
}
alert("<tr> clicked");
});

Et sautez tout le reste. Voici un exemple complet faisant exactement ce que vous voulez, avec un <tr> clic événement et un modal bootstrap, montrant réellement lorsque vous cliquez sur le add-button -> http://jsfiddle.net/45tf0095/

Comme @Regent le mentionne, dupliqué id"s est une très mauvaise pratique. Mais ce n’est pas pour cette raison que vous rencontrez le problème décrit dans la question, c’est une question différente. Tester la correspondance sur e.target.classNameet passez le bouton id"s à la place, si vous souhaitez mettre à jour votre code selon les normes de tous les jours.

---

2 pour la réponse № 2

Et voici la raison: les identifiants d'éléments doit être unique. $("#ModalBtn").click(function() { lie le gestionnaire d’événements uniquement au premier bouton "Ajouter".

Changement

return "<button id="ModalBtn" class="btn btn-inverse btn-xs" data-toggle="modal" data-target="#myModal">Add</button>";

à

return "<button class="ModalBtn btn btn-inverse btn-xs" data-toggle="modal" data-target="#myModal">Add</button>";

Et le code ressemblera à:

Violon mis à jour.

var buttonClicked = false;

$("#table_id tbody").on("click", "tr", function()
{
if (!buttonClicked)
{
alert("tr clicked!");
}
else
{
buttonClicked = false; //it is important, do not omit this line
}
});

$(".ModalBtn").click(function()
{
alert("Button is clicked");
buttonClicked = true;
});

Mettre à jour. Pour les boutons créés dynamiquement, un gestionnaire d'événements délégué peut être utilisé

$("#table_id tbody").on("click", ".ModalBtn", function()
{
alert("Button is clicked");
buttonClicked = true;
});

---