1

私はtrにクリックイベントがあるテーブルを持っています:

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

、このクリック イベント:

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

正常に動作しますが、行にはtdのクリックイベントもあります:

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

そしてこれは互いに矛盾します。tr がクリックされた場合と、tr 内のこの特定の td がクリックされた場合に別のことをしたい。では、tr.click() イベントで、特定の td をクリックしたときにイベントが発生しないように定義するにはどうすればよいですか?

コードは次のとおりです。

// 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 に答える 4

3

あなたの場合

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

あなたのためにそれをします。

ここで動作するデモを見ることができます

于 2009-08-28T11:19:19.393 に答える
1

ここでの使用に関するいくつかの回答stopPropagationは、質問に対する直接の回答です。

クリック イベントがバブルすることを思い出してください (実際、それがあなたが実行しているものです)。そのため、行またはセルでクリック イベントをフックしたくないのではないかと思います。まったく、代わりにテーブルの上に。(これは、イベント委任と呼ばれることもあります。) テーブルのclickハンドラーで、実際にクリックされた要素 (行、セルなど) を確認できます。それを行うためのjQuery構文はわかりませんが、PrototypeはEvent#findElementこの目的を提供しており、jQueryには似たようなものがあると確信しています。そうでない場合は、イベントのtargetプロパティから開始し、jQuery の強力な DOM 走査ツールを使用して簡単に記述できます。

数十または数百ではなく 1 つのハンドラーを使用すると、メモリ効率が向上し、多くの場合、コードも単純になります。

于 2009-08-28T11:35:37.487 に答える