Jquery: Как не выбрать конкретный столбец - PullRequest
Новая
       2

Jquery: Как не выбрать конкретный столбец

1 голос
/ 28 августа 2009

У меня есть таблица, где у меня есть событие щелчка на tr: 

<tr id="<%= candidate.AnsogerID %>" class="newCandidatesTableTr">

, это событие клика: 

$(".newCandidatesTableTr").click(function(e) {

работает просто отлично, но в строке у меня также есть событие click для td: 

$(".insertCandidate").live("click", (function(e) {

и это противоречит друг другу. Я хочу сделать одну вещь, если щелкает tr, и другую, когда нажимается этот конкретный td в tr. Так как же мне в моем событии tr.click () определить, что это событие не должно произойти, когда я нажимаю на определенный тд?

Вот код: 

// Lists a table with old candidates who migth be the same person as the new candidate
        $(".newCandidatesTableTr").click(function(e) {
            alert(this.id);
            GetCandidateName(this.id);
        });

// Show insert candidate dialog
        $(".insertCandidate").live("click", (function(e) {
            var tempCanName = $(".suggentionCandidatesTableTitle").text();
            var tempCanNameSub = tempCanName.substr(0, tempCanName.length - 1);
            var canName = $(".suggentionCandidateName_" + canID + "").text();
            $("#mergeCandidateDialog").empty();
            $.blockUI({ message: $("#mergeCandidateDialog").append(
                "<div>" + tempCanNameSub + "'s ansøgning vil blive lagt under den eksiterende ansøger " + canName + "'s data.<br /><br /> Ønsker du at fortsætte?<br /><br /></div>" +
                "<div id=\"content\">" +
                "<input type=\"button\" id=\"" + this.id + "\" class=\"insertCandidateYes\" value=\"Ja\" />" +
                "<input type=\"button\" id=\"insertCandidateNo\" value=\"Nej\" /></div>"), css: { cursor: 'default', fontWeight: 'normal', padding: '7px', textAlign: 'left' }
            });
        }));

<% foreach (var candidate in Model.Ansogninger)
        {
             %>
                <tr id="<%= candidate.AnsogerID %>" class="newCandidatesTableTr">
                    <td><div id="candidateID""><label title="<%= candidate.Navn %>"><%= candidate.AnsogerID %></label></div></td>
                    <td><div id="<%= "candidateName_" + candidate.AnsogerID %>" class="candidateNameTD"><%= candidate.Navn %></div></td>
                    <td><div id="candidateEmail"><%= candidate.Email %></div></td>
                    <td><div id="candidateRundeName"><%= Model.RundeName %></div></td>
                    <td id="testTD">
                        <div id="<%= "acceptCandidateButton_" + candidate.AnsogerID %>" class="acceptb">Godkend</div>
                    </td>
                </tr>
             <%
        } %>

Ответы [ 4 ]

4 голосов
/ 28 августа 2009

Вы должны быть в состоянии остановить вызов обработчика кликов tr, выполнив e.stopPropagation() в обработчике кликов td. Если это не так, попробуйте e.stopImmediatePropagation().

3 голосов
/ 28 августа 2009

В вашем случае 

$(".insertCandidate").live("click", (function(e) {
    // do td stuff here
    e.stopPropagation(); // stop propagating event
});

сделает это за вас.

Вы можете увидеть рабочую демонстрацию здесь

1 голос
/ 28 августа 2009

Несколько ответов здесь об использовании stopPropagation, который является прямым ответом на вопрос.

Интересно, хотя, может ли шаг назад немного помочь: помните, что пузырьковые события всплывают (на самом деле, это то, с чем вы сталкиваетесь), и поэтому мне интересно, если вы захотите не перехватить событие click для строки или ячейки, но вместо этого для таблицы . (Это иногда называется делегированием событий.) В обработчике таблицы click вы можете узнать, какой элемент был фактически нажат (строка, ячейка и т. Д.). Я не знаю синтаксиса jQuery для этого, но Prototype предоставляет Event#findElement для этой цели, и я уверен, что jQuery имеет нечто подобное; если нет, то достаточно просто записать его, начиная со свойства target события и используя мощные инструменты обхода DOM jQuery.

Наличие одного обработчика, а не десятков или сотен, более эффективно использует память, а зачастую и проще для кода.

1 голос
/ 28 августа 2009

в вашем событии td click вы можете использовать stopPropagation(); Это гарантирует, что после этого события больше не будет срабатывать щелчок.

Редактировать : Если вы используете IE, вы можете попробовать window.event.cancelBubble = true;

Кроме того, то, что я имел в виду, больше событий не запускается после его завершения, я имел в виду, что после stopPropagation() события больше не будут запускаться, и если вы поместите это в событие td click, событие tr click не должно ' не быть уволенным ...

...