0

次のように、空の div があります。

<div id="my-content"></div>

次に、次のようなjQueryがあります。

/**IGNORE THIS**/
function makeButton(){
    $('#my-content').html('<input type="button" value="Say hey" id="my-button" />');
}

ここまでは順調ですね。それから私はこのjsを持っています:

$(document).ready(function(){
    makeButton();
});

完璧に動作しますが、この後、このボタンのトリガーを作成すると、次のようになり、ボタンIDに応答しません...

$(document).ready(function(){
    makeButton();
    $('#my-button').click(function(){
        alert('Hello!');
    });
});

<script>$(document).ready... blah... alert('Hello');</script>もちろん、makeButton 関数の .html() に追加することもできますが、それは実際の方法ではないと思います。

makeButton() の準備ができてボタンが追加された後、クリックのリッスンを開始するように JS に指示するにはどうすればよいですか?

編集：わかりました、それはうまくいきます。ごめん。実際のケースは上記とは異なりますが、似ています。

makeButton() は、実際には ajax によってデータを取得する別の関数であるため、makeButton は次のようになります。

makeButton(){
    $.ajax({
        type: 'POST',
        url: 'ajax_images.php',
        data: {pageNr: pageNr},
        success:function(response) {
            //Loops the json and does something like this:
            var HTML = '<div id="thumbnail">;
            HTML += 'Response Stuff'
            HTML += '</div>';
            $('#my-content').html(HTML);
        } 
    });
}

混乱させてすみません。

4

2 に答える 2

3

問題は、要素が存在する前にイベント ハンドラーをバインドしようとしていることです。Ajax 呼び出しは非同期です。

$.ajax呼び出しから promise オブジェクトを返すことができます。

function makeButton(){
    return $.ajax({
        // ...
    });
}

次に、コールバックを追加して、Ajax 呼び出しが成功したときにイベント ハンドラーをバインドします。

makeButton().done(function() {
    $('#my-button').click(function(){
        alert('Hello!');
    });
});

別の方法として、コードのパラドックスが彼の回答で示しているように、イベント委任を使用することもできます。Ajax の仕組みについてもう少し詳しく知りたい場合は、この回答をご覧ください。

于 2013-02-07T18:21:49.857 に答える
3

簡単な変更を加えるだけです：

$(document).ready(function(){
    makeButton();
    $('#my-content').on('click', '#my-button', function(){
        alert('Hello!');
    });
});

#my-buttonページの読み込み後にDOMツリーに来るため、デリゲートイベントが必要です。jQueryでのデリゲート イベント バインディングの詳細については、こちらを参照してください。

于 2013-02-07T18:03:44.980 に答える