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

只需做一个简单的改变：

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

您需要委托事件，#my-button因为它在页面加载后进入 DOM 树。要了解有关jQuery中委托事件绑定的更多信息，请参见此处。

于 2013-02-07T18:03:44.980 回答
3

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

您可以从$.ajax调用中返回承诺对象：

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

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

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

或者，您可以使用事件委托，正如他的回答中的代码悖论所示。要了解有关 Ajax 工作原理的更多信息，请查看此答案。

于 2013-02-07T18:21:49.857 回答