[解決済み] DOMにまだ追加されていないJQueryオブジェクトにクリックイベントをアタッチする [重複]。

質問

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

基本的に、私はこのボタンを持っていて、私の関数はそれを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;     
}

returnされたボタンはクリックイベントをキャッチできません。しかし、こうすると（ボタンがDOMに追加された後）。

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

うまくいった...しかし、私の思い通りにはならない。

オブジェクトがまだDOMの一部になっていないことが関係しているようです。

ところで、私は OpenLayers を使っていて、ボタンを追加している DOM オブジェクトは OpenLayers.FramedCloud です (これはまだ DOM の一部ではありませんが、いくつかのイベントが発生したらそうなります。) 。

どのように解決するのですか？

これを使う。 domレディに存在する任意の親要素でbodyを置き換えることができます。

$('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+.