web-dev-qa-db-ja.com

DOMにまだ追加されていないJQueryオブジェクトにクリックイベントをアタッチする

DOMに追加する前に、クリックイベントをJQueryオブジェクトにアタッチするのに苦労しています。

基本的に、関数が返すこのボタンがあり、それをDOMに追加します。私が欲しいのは、独自のクリックハンドラでボタンを返すことです。ハンドラーをアタッチするためにDOMから選択したくありません。

私のコードはこれです：

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

戻るボタンは、クリックイベントをキャッチできません。ただし、これを行う場合（ボタンがDOMに追加された後）：

$('#my-button').click(function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

それは動作します...しかし、私のためではなく、私が望むものではありません。

オブジェクトはまだDOMの一部ではないという事実に関連しているようです。

ああ！ちなみに、私はOpenLayersで作業しており、ボタンを追加するDOMオブジェクトはOpenLayers.FramedCloudです（まだDOMの一部ではありませんが、いくつかのイベントがトリガーされると）。

javascriptjqueryjavascript-eventsonclick
159
danielrvt

これを使って。 bodyは、dom readyに存在する親要素に置き換えることができます

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

こちらをご覧ください http://api.jquery.com/on/ 1.7（+）以降のlive（）を置き換えるon（）の使用方法の詳細については.

使用するバージョンを以下にリストします

$（selector）.live（events、data、handler）; // jQuery 1.3+

$（document）.delegate（selector、events、data、handler）; // jQuery 1.4.3+

$（document）.on（events、selector、data、handler）; // jQuery 1.7+

253
ᾠῗᵲᄐᶌ

誰もまだこれを投稿していないことに本当に驚きました

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
})

その時点でそのページにどの要素が配置されるかわからない場合は、それをdocumentに添付してください。

注：これはパフォーマンスの観点からは最適ではありません-最大速度を得るには、挿入される要素の最も近い親にアタッチする必要があります。

34
Matas Vaitkevicius

これを試してください....ボディを親セレクターに置き換えます

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});
21
Vins

試してください：

$('body').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    }
},'#my-button');

jsfiddleの例.

.on（）を使用して動的要素にバインドする場合、ページにすでに存在する要素（この例のbodyなど）を参照する必要があります。パフォーマンスを改善するより具体的な要素を使用できる場合。

イベントハンドラーは、現在選択されている要素にのみバインドされます。コードが.on（）を呼び出すときにページに存在する必要があります。要素が存在し、選択できるようにするには、ページのHTMLマークアップにある要素のドキュメント準備ハンドラー内でイベントバインドを実行します。新しいHTMLがページに挿入される場合、新しいHTMLがページに配置された後に要素を選択し、イベントハンドラーをアタッチします。または、次に説明するように、委任されたイベントを使用してイベントハンドラーをアタッチします。

Src： http://api.jquery.com/on/

9
j08691

追加する必要があります。次を使用して要素を作成します。

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

その後、追加すると機能します。

あなたの例 here と簡単なバージョン here を見てください。

8
Marco Allori

イベント中

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

または、追加後にイベントを追加します

1
Jorge

.on（）を使用して、最近読み込まれたテーブルセル内の入力にバインドされたイベントをリッスンするユーザー向けの情報の補足。 delegate（）を使用して、イベントハンドラーをこのようなテーブルセルにバインドできましたが、.on（）は機能しません。

テーブルIDを.delegate（）にバインドし、入力を記述するセレクターを使用しました。

例えば.

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

jQuery

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});
1
Fabien Haddadi

jQuery .onメソッドは、ページの読み込み時に要素がなくてもイベントをバインドするために使用されます。 link は次のように使用されます。

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

Jquery 1.7より前では、. live（） メソッドが使用されていましたが、現在は非推奨です。

0
Nishu Tayal

.liveを使用するとうまくいきますか？

$("#my-button").live("click", function(){ alert("yay!"); });

http://api.jquery.com/live/

編集

JQuery 1.7以降、.live（）メソッドは非推奨になりました。 .on（）を使用して、イベントハンドラーをアタッチします。 jQueryの古いバージョンのユーザーは、.live（）よりも.delegate（）を使用する必要があります。

http://api.jquery.com/on/

0
PsychoDUCK