Question

好的，我有一个问题，我在自定义表单上使用按钮执行两个AJAX方法，这两个函数在首次以正确的方式选择时都有效。我遇到的问题是在添加/删除具有事件处理程序的类之后再次尝试执行相同的函数时，它们无法再次执行，这意味着它们只有一个生命周期而且不能再次使用。

从我的研究中我发现这个问题是jQuery事件委托，在阅读完文档之后，我将原来的单击函数改为on函数，这些函数应该根据我的理解重新应用事件处理程序。

 $(document).ready(function () {
        $(".checkButton").on('click', function () {
            var objID = this.id;
            $.ajax({
                url: "index.php?system=testimonials&task=update",
                type: 'POST',
                data: {val: objID},
                success: function (data, textStatus, jqXHR)
                {
                    $("#testimonialSpan" + objID).removeClass("label-warning");
                    $("#testimonialSpan" + objID).addClass("label-success");
                    $("#testimonialSpan" + objID).text("Approved");
                    $("#testimonialTick" + objID).removeClass("fa-check");
                    $("#testimonialTick" + objID).addClass("fa-times");
                    $("#" + objID).removeClass("checkButton");
                    $("#" + objID).addClass("timesButton");
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert(textStatus + errorThrown + jqXHR);
                }
            });
        });

        $(".timesButton").on('click', function () {
            var objID = this.id;
            $.ajax({
                url: "index.php?system=testimonials&task=update",
                type: 'POST',
                data: {times: objID},
                success: function (data, textStatus, jqXHR)
                {
                    $("#testimonialSpan" + objID).removeClass("label-success");
                    $("#testimonialSpan" + objID).addClass("label-warning");
                    $("#testimonialSpan" + objID).text("Pending");
                    $("#testimonialTick" + objID).removeClass("fa-times");
                    $("#testimonialTick" + objID).addClass("fa-check");
                    $("#" + objID).removeClass("timesButton");
                    $("#" + objID).addClass("checkButton");
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert(textStatus + errorThrown + jqXHR);
                }
            });
        });
    });

我相信我很接近，但我无法按预期完成此功能。

Answer 1

使用$(document).on('click', '.checkButton', function(){});代替$(".checkButton").on('click', function(){});和$(document).on('click', '.timesButton ', function(){});代替$(".timesButton").on('click', function () {});

它将事件绑定到文档而不绑定到元素。因此，无论何时单击带有选择器的元素，它都会触发。

重新应用类选择器后，jQuery事件不会执行

1 个答案: