Chcem zrušiť obsluhu udalosti na mojom riadku po kliknutí na tlačidlo v riadku - jquery, modal-dialog, datatables

Používam dátové tabuľky a mám spracovateľa udalostínastaviť tak, aby po kliknutí na riadok otvorila ďalšiu stránku. Každý riadok však obsahuje tlačidlo, ktoré otvorí modálne dialógové okno. Snažím sa nastaviť gombík na kliknutie na tlačidlo tak, že keď sa stlačí, nová udalosť stránky sa zruší a namiesto toho sa otvorí modal. Tu je môj kód:

$("#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();
});

UPDATE: Tu je zvyšok skriptu. Myslím, že príčinou problémov môžu byť datové tabuľky var. Ak to odstránim, obsluhy udalostí fungujú správne, napríklad v ukážke 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>";
}
}
]
} );

odpovede:

1 pre odpoveď č. 1

Možno nerozumiem, ale tu veci príliš nekomplikujete? Ako som pochopil, chcete iba kliknúť na riadok / <tr>a chce po kliknutí na tlačidlo otvoriť kontextové okno (napríklad bootstrap?). Ale nie oboje súčasne. Jednoducho:

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

A vynechajte všetko ostatné. Toto je úplný príklad, ktorý robí presne to, čo chcete, pomocou <tr> Kliknite na udalosť a modus bootstrap, ktorý sa skutočne zobrazí, keď kliknete na add-tlačidlo -> http://jsfiddle.net/45tf0095/

Ako uvádza @Regent, duplikované idJe to veľmi zlá prax. Ale to nie je dôvod, prečo máte problém popísaný v otázke, je to iná záležitosť. Test na zhodu e.target.classNamea preskočte tlačidlo idNamiesto toho, ak chcete aktualizovať svoj kód podľa každodenných štandardov.

---

2 pre odpoveď č. 2

A tu je dôvod: ID prvkov musieť byť jedinečný. $("#ModalBtn").click(function() { viaže obsluhu udalosti iba na prvé tlačidlo „Pridať“.

zmena

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

na

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

A kód bude vyzerať takto:

Aktualizované husle.

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;
});

Aktualizácie. Pre dynamicky vytvorené tlačidlá sa môže použiť delegovaná obsluha udalostí:

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

---