web-dev-qa-db-ja.com

DOMに追加されたばかりのjquery要素へのアクセスを取得する

私は単にDOM上にある要素を次のように追加しています：

$("#div_element").append('<a href="#">test</a>');

追加した直後に、クリック機能をバインドするために作成した要素にアクセスする必要があります。

$("#div_element").append('<a href="#">test</a>').click(function(){alert("test")});

しかし、上記は機能しませんでした。要素を一意に識別できましたが、おそらく追加した直後に要素を取得できる方法がある場合、それは少し大変な作業のようです。

javascriptjqueryappend
47
Greg Alexander

あなたはこれを行うことができます：

var el = $('<a href="#">test</a>');

$("#div_element").append(el);

el.click(function(){alert("test")});

// or preferrably:
el.on('click', function(){alert("test")});

Append関数は、文字列またはjQuery要素の2種類の引数を受け入れます。文字列が渡された場合、jQuery要素を内部で作成し、親要素に追加します。

この場合、jQuery要素に自分でアクセスしたいので、イベントハンドラーをアタッチできます。そのため、文字列を渡してjQueryに要素を作成させる代わりに、最初に要素を作成し、それをappend関数に渡す必要があります。

それを行った後も、ハンドラをアタッチできるようにjQuery要素にアクセスできます。

80
Kenneth
var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

http://jsfiddle.net/33jX4/

5
RafH

追加する前に、新しい要素への参照を保存してください：

var newElement = $('<a href="#">test</a>');
$("#div_element").append(newElement);
newElement.click(function(){alert("test")});
1
codebox

そのelementにIDを追加し、次のように使用します

$("#div_element").append('<a id="tester" href="#">test</a>');


$('#tester').on('click', function(event) {
console.log('tester clicked');
});
0
Suresh Atta

最後の要素は新しい要素になります

$('a:last','#div_element').on('click',function(){
    // do something
});
0
anpsmn

要素を作成するときに要素にイベントを添付できます-

var ele =$("<a href='#'>Link</a>");

ele.on("click",function(){
    alert("clicked");
});


$("#div_element").append(ele);
0
SachinGutte

追加する前に、クリックハンドラーをアンカーに添付するだけです。

$("#div_element").append($('<a href="#">test</a>').click(function(){alert("test")}));
0
Blazemonger