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上使用谷歌浏览器版本39.0.2171.95。

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

Answer 1

由于您使用ajax加载它看起来的初始内容，因此在DOM的初始页面加载时可能不存在.class / #me html元素。由于你没有发布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");
}

一些注意事项：

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

jQuery onclick事件正在处理多个ajax请求

2 个答案: