184

クリック イベントを 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 の一部ではありませんが、いくつかのイベントがトリガーされると、その一部になります)。

4

10 に答える 10

298

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

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

on() の使用方法の詳細については、http: //api.jquery.com/on/を参照してください。これは、1.7 以降で live() を置き換えるものです。

以下に、使用する必要があるバージョンを示します

$(selector).live(イベント、データ、ハンドラー); // jQuery 1.3+

$(document).delegate(セレクター、イベント、データ、ハンドラー); // jQuery 1.4.3+

$(document).on(イベント、セレクター、データ、ハンドラー); // jQuery 1.7+

于 2012-06-06T19:01:28.253 に答える
23

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

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});
于 2012-06-06T18:59:25.410 に答える
8

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

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

次に、追加すると機能します。

ここであなたの例を見て、ここで簡単なバージョンを見てください

于 2015-01-15T18:58:20.993 に答える
0

.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/

于 2012-06-06T18:58:03.550 に答える
0

イベント時

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

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

于 2012-06-06T19:01:50.090 に答える