1

このような関数がある場合、クリックされた要素の ID を取得するにはどうすればよいですか?

$("#btnOne, #btnTwo").on("click", "input.select", function () {

私は試した：

this.id;

と

$(this).attr("id");

ここにhtmlがあります

<div id="TransferOwnershipBox" title="Transfer Ownership">
    <table>
        <tr>
            <td>
                <asp:TextBox ID="tbSearchField" Text="Search..." ClientIDMode="Static" Width="400px" runat="server" CssClass="text ui-widget-content ui-corner-all"></asp:TextBox>
            </td>
            <td>
                <input type="button" id="btnSearch" data-str="tblOwnerSearchResults" value="Search" Class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            </td>
        </tr>
    </table>
    <table id="tblOwnerSearchResults" data-str="ownerId" data-dataItem="id" style="border: none; width: 100%; padding: 2px;"></table>
</div>


<!-----COURSE DIRECTOR----->
<div id="CourseDirectorBox" title="Directors">
    <table>
        <tr>
            <td>
                <asp:TextBox ID="tbDirector" Text="Search..." ClientIDMode="Static" Width="400px" runat="server" CssClass="text ui-widget-content ui-corner-all"></asp:TextBox>
            </td>
            <td>
                <input type="button" id="btnDirectorSearch" data-str="tblDirectorSearchResults" value="Search" Class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            </td>
        </tr>
    </table>
    <table id="tblDirectorSearchResults" data-str="source" data-dataItem="DisplayName" style="border: none; width: 100%; padding: 2px;"></table>              
</div>

しかし、私はどちらからもIDを取得していません。

ありがとう

4

4 に答える 4

2

の委任構文を使用します.on()。

イベントは、またはinput.selectではなく要素で発生します。#btnOne#btnTwo

コンテナー (#btnOneまたはbtnTwo) id が必要な場合は、

$("#btnOne, #btnTwo").on("click", "input.select", function () {  
   var id = $(this).closest('#btnOne, #btnTwo')[0].id;
});

バージョン 1.7 以降を使用している場合は、@ undefined の回答を使用してください (これを使用する必要があります) 。

于 2013-03-28T20:00:20.857 に答える
2

thisコードでand要素でinputはなく要素を参照する場合、イベント委任のターゲット要素を参照するイベント オブジェクトのプロパティを使用できます。#btnOne#btnTwodelegateTarget

$("#btnOne, #btnTwo").on("click", "input.select", function(event) {
    console.log(event.delegateTarget.id);
});

http://jsfiddle.net/WNC5y/

于 2013-03-28T20:03:50.453 に答える
1

このコードを試してください:

$("#btnOne, #btnTwo").click(function(){
    $(this).attr("id");
});
于 2013-03-28T20:03:01.227 に答える
1

HTML が表示されないので、例を示します。

HTML

<div id="ID1">Hello World</div>

jQuery

$(document).ready(function() {
    $("div").click(function() {
        var id = $(this).attr("id");
        alert(id);
    });
});

テスト済みで動作します...divクリックセレクターを引用符で囲む必要がありました（当たり前！）

繰り返しますが、私のコメントに関しては、このアプローチは単純な jQuery onClick イベントではおそらく最もクリーンです。jQuery に .on() バインディング メソッドを使用する必要がある場合は、非常に似ています。

デリゲート

クリック イベント バインディングの .on() デリゲート メソッドを使用するには、(質問にあるように) 構文は次のようになります。

HTML

<div id="myTable">
    <div class="table-row" id="a">Hello World</div>
    <div class="table-row" id="b">I'm a delegate!</div>
</div>

jQuery

$(document).ready(function() {
    $("#myTable").on("click", "div", function() {
        var id = $(this).attr("id");
        alert(id);
    });
});

このイベント バインドの方法により、親イベント ハンドラー (この場合は #myTable) の子孫 (子) である要素もバインドできます。利点は、ハンドラーの作成後にイベントハンドラーに作成および追加された子もバインドされることです。時間を節約するための天の恵みになる可能性があります。基本的に、イベントを動的オブジェクトにバインドする簡単な方法を可能にします。やってみて！

于 2013-03-28T20:00:30.783 に答える