javascript - 使用 jQuery .attr 或 .prop 设置属性值不起作用

Question

我创建了一个按钮，其属性名为“已加载”，初始值为“否”。单击按钮后，我正在运行一些 ajax，最后我尝试将“已加载”属性设置为“是”，这样如果用户多次单击按钮，则不会再次运行 ajax .

我有这样的东西：http: //jsfiddle.net/PDW35/2/

单击按钮不会将加载更改为“是”。但是，如果您在 .attr 调用之后立即发出警报，如下所示：

alert($(this).attr('loaded'));

警报框确实包含“是”，这无济于事，因为一旦用户单击，上面的相同代码就会在屏幕上显示“否”警报框。

如果我使用.prop()而不是.attr(). 我是否在这里遗漏了一点，或者.prop()只是.attr()不使用自定义属性？

编辑：根据以下评论使用 ajax 更新 jsfiddle：http: //jsfiddle.net/PDW35/5/

Answer 1

我不确定原始代码不起作用的原因，但$this似乎是出于某种原因。试试下面的，它似乎工作。小提琴来了。

找到原因后，我会尝试更新答案。

var loaded = $(".preview-button").attr('data-loaded');
if (loaded === "no") {
    $.ajax({
        success: function (result) {
            $(".preview-button").attr('data-loaded', 'yes');
            alert($(".preview-button").attr('data-loaded'));
        }
    });
} else {
    alert("data loaded");
}

参考这个线程，这似乎是为什么$this在 AJAX 调用内部似乎不起作用的原因。

Answer 2

阅读问题..

这样如果用户多次单击该按钮，则不会再次运行 ajax。

我认为您需要one()，它允许事件只运行一次.. 无需更改属性和属性

例子

 $(".preview-button").one('click',function(){
//your ajax stuff   
    alert('clicked!!!!');
 });

Answer 3

您可以为click（或submit）函数设置属性：

$( ".preview-button" ).click( function() {
    this.ajaxCompleted = this.ajaxCompleted || false;

    if ( !this.ajaxCompleted ) {
        // run your request and set this.ajaxCompleted to true in a callback;
    }

    // do other stuff
} );

Answer 4

您可以尝试以下代码：一旦您单击数据已加载，第二次单击将提醒数据已加载。

$(".preview-button").click(function(){

var id = $(this).attr('button_id');
var loaded = $(this).attr('loaded');
    if(loaded == "no"){        
        $(this).attr('loaded', 'yes');
   }else{
        alert("Data is loaded");     
   }
});

这里的工作示例：http: //jsfiddle.net/PDW35/4/

Answer 5

只需像这个例子一样用'on'改变点击功能：

$(document).on('click', '.element', function () {
    let myelem_attr= $(this).attr('data-my-attr');
}