Question

我正在上课abc的div。有一个jQuery函数，它使用它的类选择div并发出ajax请求。现在当成功返回ajax函数时，我已经更改了类，因此在它的类abc的div之前不应再次调用ajax方法。但是，即使将div的类更新为xyz之后，也会再次调用相同的ajax函数。

success: function(data){
                    //updating the class here
                    $(self).addClass('xyz').removeClass('abc');
                }

我可以在源代码中看到类已更新，但仍然是相同的属性选择器选择较早的类并再次运行ajax方法。有没有其他方法可以做我想做的事情？请帮忙！提前谢谢。

编辑：

$('.up_arrow').each(function() {
    $(this).click(function(event) {

        var resid = $(this).attr('name');

        var post_data = {
            'resid' : resid,
            '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
        };

        var self = this;

        if(resid){
            $.ajax({
                type: 'POST',
                url: "/ci_theyaw/restaurants/plusrepo",
                data: post_data,
                success: function(data){
                    //console.log($(this).siblings('.rep_count').text());
                    $(self).addClass('up_arrowed').removeClass('up_arrow');
                    $(self).css('background-position','0 40px');
                    $(self).next('.rep_count').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    console.log(xhr.responseText);
                    alert(thrownError);
                }
            });
        }
    });
});

这是完成这项工作的完整功能。这里要更新的课程是up_arrow - ＆gt; up_arrowed，该函数的选择器为up_arrow。但在更新之后无论如何都要执行。

Answer 1

$('.up_arrow').each(function() {

这里发生的是jQuery查找此时具有类up_arrow 的所有元素并直接将事件附加到这些元素。之后，即使课程发生变化，课程也无关紧要。

如果您改为使用.on()：

$( document ).on( 'click', '.up_arrow', function(event) {
    var resid = $(this).attr('name');
    // etc

...现在.up_arrow选择器在用户点击页面时评估，而不是在首次执行代码时。您还可以将document更改为包含所有.up_arrow元素的公共静态元素。

不相关的附注：如果您在其他情况下使用.click()（在这种情况下您无法使用它）您不需要使用.each()只需一个简单的点击处理程序;只做$('.selector').click(function() {。它将自动应用于每个元素。

更新类后，前一个类选择器仍在工作

1 个答案: