jQuery onclick 事件在发出多个 ajax 请求时不起作用

Question

我在我的 jQuery 文件中发出了很少的 ajax 请求。 关于这些 jQuery 请求的成功，我写了一些关于不起作用的点击事件。

这是我的代码

$(document).ready(function (){

$.ajax ({
    type: "POST",
    url: 'myServlet',
    async: false,
    success: function (response) {
        id = parseInt(response);
        setOutputEvents();
    }
});

function setOutputEvents() {
    for (var queryNumber = 0; queryNumber <= id; queryNumber++) {
        $.ajax({
            type: "POST",
            url: 'myOtherServlet',
            data: {queryNumber: queryNumber},
            success: success,
            async: false
        });

        var success = function (response) { 
            //some code here
                generateTable();
        }
    }
}

function generateTable () {
    //some code here
    pagination();
}

function pagination(){
    $(".class").click(function(event) {
        alert();
    });
}

$("#me").on("click", function(){
    alert("me is triggered");
});
});

我知道发出多个 ajax 请求是一种糟糕的编程习惯，但是点击事件没有被触发的原因是什么？

这些是不起作用的 onclick 事件。

function pagination(){
    $(".class").click(function(event) {
        alert();
    });
}

$("#me").on("click", function(){
    alert("me is triggered");
});

我在 Windows 7 上使用 Google Chrome 版本 39.0.2171.95。

如果需要任何进一步的信息，请告诉我。

Answer 1

由于您甚至使用 ajax 来加载初始内容，因此 .class / #me html 元素在 DOM 的初始页面加载时可能不存在。 由于您没有发布 html，我猜是这种情况。

因此，您需要使用委托事件单击处理程序来响应它

所以，你会改变

 $("#me").on("click", function(){

到

 $(document).on("click", "#me", function(){

等等以将其链接到确实存在的父元素，即文档本身。

Answer 2

这会起作用：

$(".class").on("click", function(){
    alert("me is triggered");
});

function generateTable () {
    //some code here
    pagination();
}

function pagination(){
    $(".class").trigger("click");
}

一些注意事项：

1. 事件处理程序必须在触发点击之前注册。
2. 触发的点击选择器必须与注册点击事件的类相匹配。
3. 函数必须在使用前定义。