Искам да анулирам редактор на събития в моя ред, когато е натиснат бутон в реда - jquery, modal-dialog, datatables

Аз използвам datatables и имам събитие манипулатортака че при щракване върху ред да се отвори друга страница. Всеки ред обаче съдържа бутон, който ще отвори модален диалогов прозорец. Опитвам се да настроя инструмент за управление на кликванията на бутона, така че когато бъде натиснат, събитието за нова страница се отменя и вместо това се отваря модалният. Ето моя код:

$("#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: Ето остатъка от сценария. Мисля, че може би причината за неприятностите е датите за разпространение var. Ако го премахна, обработващите събития работят правилно, както в demo на 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>";
}
}
]
} );

Отговори:

1 за отговор № 1

Може би не разбирам добре, но не си ли прекалено сложни тук? Както разбирам, просто искате събитие за кликване на реда / <tr>, и иска да отвори изскачащ прозорец (може би bootstrap?), когато щракнете върху бутона. Но не и двете едновременно. Просто:

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

И пропуснете останалите. Ето един пълен пример, който прави точно това, което искате, с <tr> кликване събитие и bootstrap модал, всъщност се показват, когато сте clickng на add-бутон -> http://jsfiddle.net/45tf0095/

Както @Regent споменава, дублира id"Това е много лоша практика, но това не е причината, поради която имате проблем, описан в въпроса, това е различен въпрос. e.target.className, и пропуснете бутона idвместо това, ако искате да актуализирате кода си в ежедневните стандарти.

---

2 за отговор № 2

И тук е причина: идентификатори на елементи трябва да Бъди уникален. $("#ModalBtn").click(function() { свързва инструмента за обработка на събития само до първия бутон "Добавяне".

промяна

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>";

И кодът ще изглежда така:

Актуализирано цигулка.

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

Update. За динамично създадени бутони може да се използва делегирания манипулатор на събития:

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

---