59

JSP ページにいくつかのリンクを追加しました。

<a class="applicationdata" href="#" id="1">Organization Data</a>
<a class="applicationdata" href="#" id="2">Business Units</a>
<a class="applicationdata" href="#" id="6">Applications</a>
<a class="applicationdata" href="#" id="15">Data Entity</a>

クリック イベント用に登録された jQuery 関数があります。

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");
    $('#gentab a').addClass("tabclick");
    $('#gentab a').attr('href', '#datacollector');
});

で内部tabclickにあるクラスを追加します。正常に動作しています。これが私のコードです：<a><li>id="gentab"<li>

<li id="applndata"><a class="tabclick" href="#appdata" target="main">Application Data</a></li>
<li id="gentab"><a href="#datacollector" target="main">General</a></li>

これで、これらのリンクの jQuery クリック ハンドラーができました

$("a.tabclick").click(function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

最初のリンクでは、正常に機能しています。<li>IDを警告しています。しかし、最初の jQuery によって追加された 2 番目<li>の については、機能していません。class="tabclick"

試してみ$("a.tabclick").live("click", function()ましたが、最初のリンククリックイベントも機能しませんでした。

4

7 に答える 7

194

は動的に追加されるため、classイベント デリゲーションを使用してイベント ハンドラーを登録する必要があります。

$(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});
于 2013-06-03T08:51:47.473 に答える
19

以下を使用する必要があります。

$('#gentab').on('click', 'a.tabclick', function(event) {
    event.preventDefault();
    var liId = $(this).closest("li").attr("id");
    alert(liId);  
});

これにより、要素内の任意のアンカーにイベントがアタッチされ、要素ツリー#gentab全体をチェックする必要が減り、document効率が向上します。

于 2013-06-03T09:02:05.813 に答える
13

.live()デリゲートされた要素に使用する場合は、次の構文で .on() を使用します

$(document).on('click', "a.tabclick", function() {

この構文は、委任されたイベントで機能します

。の上（）

于 2013-06-03T08:52:03.650 に答える
8

@Arun P Johny に基づいて、これは入力に対して行う方法です。

<input type="button" class="btEdit" id="myButton1">

これは私がjQueryでそれを取得した方法です:

$(document).on('click', "input.btEdit", function () {
    var id = this.id;
    console.log(id);
});

これにより、コンソール myButton1 にログオンします。@Arun が言ったように、イベントを動的に追加する必要がありますが、私の場合、最初に親を呼び出す必要はありません。

アップデート

次のように言ったほうがよいでしょう。

$(document).on('click', "input.btEdit", function () {
    var id = $(this).id;
    console.log(id);
});

これは JQuery の構文であるため、どちらも機能しますが。

于 2014-02-05T21:48:53.577 に答える
2

ドキュメント準備完了イベントには、クラス tabclick を持つタグはありません。tabclick クラスを追加するときは、クリックイベントを動的にバインドする必要があります。このコードをください：

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");

   $('#gentab a').addClass("tabclick")
    .click(function() {
          var liId = $(this).parent("li").attr("id");
         alert(liId);        
      });


 $('#gentab a').attr('href', '#datacollector');

});
于 2013-06-03T08:58:33.193 に答える