javascript - 嵌套脚本？

Question

我有一个空的 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);
        } 
    });
}

抱歉让您感到困惑。

Answer 1

问题是您试图在元素存在之前绑定(bind)事件处理程序。 Ajax 调用是异步的!

您可以从 $.ajax 调用中返回 Promise 对象:

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

然后在 Ajax 调用成功时通过添加回调来绑定(bind)事件处理程序:

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

<小时/>

或者，您可以使用事件委托(delegate)，如 thecodeparadox shows in his answer 。要了解有关 Ajax 工作原理的更多信息，请查看 this answer .