即使更新了班级，先前的班级选择器仍在工作 [英] previous class selector is working even after updating the class

问题描述

我的班级为abc的div.有一个jQuery函数使用其类选择div并发出ajax请求.现在，当成功返回ajax函数时，我已经更改了该类，以使ajax方法在它的类abc的div之前不再被调用. 但是发生的是，即使将div的类更新为xyz之后，仍会再次调用相同的ajax函数.

I am having a div with class abc. There is a jQuery function which selects that div using its class and make ajax request. Now when ajax function is successfully returned, i've changed the class so that the ajax method should not get called again until its a div of class abc. But what happens is that even after updating the class of the div to xyz the same ajax function is called again.

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

我在源代码中看到该类已更新，但是仍然使用相同的属性选择器选择较早的类并再次运行ajax方法.还有其他方法可以做我想做的事吗?请帮忙！预先感谢.

I can see in the source that the class is updated but still the same attribute selector selects the earlier class and runs the ajax method again. Is there some other way to do what i am trying to do? Please Help! Thanks in advance.

$('.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-> up_arrowed，该函数的选择器是up_arrow.但更新后仍会执行.

This is the complete function which does the job. Here the class to be updated is up_arrow -> up_arrowed and the selector for the function is up_arrow. but after updating it executes anyway.

推荐答案

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

这里发生的是，jQuery此时会查找具有up_arrow 类的所有元素，并将事件直接附加到这些元素.之后，即使改变了，该类也不再重要了.

What happens here is that jQuery looks for all elements that have the class up_arrow at this moment and attaches the event to those elements directly. After that the class doesn't matter anymore even if it changes.

如果您使用 .on() 代替:

If you use .on() instead:

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

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

...now the .up_arrow selector is evaluated at the time when the user clicks on the page instead of when the code is first executed. You can also change document to a common static element that contains all the .up_arrow elements.

不相关的旁注:如果在其他情况下使用.click()(在这种情况下不能使用它)则不需要使用具有简单的点击处理程序；只需执行$('.selector').click(function() {.它将自动应用于每个元素.

Unrelated side note: If you use .click() in other situations (in this case you can't use it) you don't need to use .each() with a simple click handler; just do $('.selector').click(function() {. It will apply to each element automatically.

这篇关于即使更新了班级，先前的班级选择器仍在工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！