javascript - 如果 jQuery 动态加载，jQuery 的 ajax() 不起作用

Question

我正在尝试使用 jQuery 的 post() 和 get() 但它们无法正常工作。我没有 HTML，所以我以这种方式加载 jQuery:

var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
document.head.appendChild(script);

看起来已经成功加载了。在控制台中使用 window.jQuery 检查。

创建按钮后立即:

var btn = document.createElement("button");
btn.id = 'gogogo';
var txt = document.createTextNode("Go");
btn.appendChild(txt);
document.body.insertBefore(btn, document.body.childNodes[0]);

按钮已成功创建。

在此之后，我得到了所需的 post():

$("#gogogo").click(function () {
    var txt = '123';
    $.post("/users", {qwe: txt}, function(result){
            alert(result);
    });
});

但是什么也没发生。单击按钮时，FireBug 中的 NET 部分保持为空。

有人知道我做错了什么吗？

Answer 1

使用 jQuery 的 .on 事件，因为您动态创建元素，即 事件委托(delegate)。

例如。

$(document).on("click","#gogogo",function () {
    alert("Inside #gogogo event handler");
    var txt = '123';
    $.post("/users", {qwe: txt}, function(result){
            alert(result);
    });
});