使用 jQuery .attr 或 .prop 设置属性值不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17987607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery .attr or .prop to set attribute value not working
提问by mmvsbg
I've created a button with attribute named 'loaded' and initial value of 'no'. Upon clicking the button I'm running some ajax and at the very end of it I'm trying to set the 'loaded' attribute to 'yes' so that the ajax is not ran again if the user clicks on the button more than once.
我创建了一个按钮，其属性名为“loaded”，初始值为“no”。单击按钮后，我正在运行一些 ajax，在它的最后，我试图将“已加载”属性设置为“是”，以便在用户多次单击按钮时不会再次运行 ajax .
I have something like this: http://jsfiddle.net/PDW35/2/
我有这样的事情：http: //jsfiddle.net/PDW35/2/
Clicking the button does not change loaded to 'yes'. However, if you do an alert right after the .attr call like this:
单击该按钮不会将加载更改为“是”。但是，如果您在 .attr 调用后立即发出警报，如下所示：
alert($(this).attr('loaded'));
the alert box does contain 'yes' which doesn't help because once the user clicks, the same code above puts up a 'no' alert box on the screen.
警报框确实包含“是”，这无济于事，因为一旦用户单击，上面的相同代码就会在屏幕上显示“否”警报框。
It all behaves the same way if I use .prop instead of .attr. Am I missing a point here or .prop and .attr just don't work with custom attributes?
如果我使用 .prop 而不是 .attr，它的行为方式都是一样的。我在这里遗漏了一点还是 .prop 和 .attr 只是不适用于自定义属性？
EDIT: Updated jsfiddle using ajax based on the comments below: http://jsfiddle.net/PDW35/5/
编辑：根据以下评论使用 ajax 更新 jsfiddle：http: //jsfiddle.net/PDW35/5/
采纳答案by Harry
I am not exactly sure of the reason why the original code isn't working, but the $thisseems to be the cause for some reason. Try the below and it seems to work. Fiddleis here.
我不确定原始代码不起作用的原因，但$this似乎是出于某种原因的原因。试试下面的，它似乎工作。小提琴来了。
I will try to update the answer with the reason as soon as I find it.
我会尽快找到原因更新答案。
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");
}
Refer this threadand this seems to be the reason why the $thisdoesnt seem to work from inside the AJAX call.
请参阅此线程，这似乎是$thisAJAX 调用内部似乎不起作用的原因。
回答by bipen
reading the question ..
阅读问题..
so that the ajax is not ran again if the user clicks on the button more than once.
以便在用户多次单击按钮时不会再次运行 ajax。
i think you need one(), it allows the event to run just once.. no need of changing the attributes and properties
我认为你需要one()，它允许事件只运行一次..无需更改属性和属性
example
例子
$(".preview-button").one('click',function(){
//your ajax stuff
alert('clicked!!!!');
});
回答by u_mulder
You can set property for your click(or submit) function:
您可以为您的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
} );
回答by maverickosama92
you could try the following code: once you clicked data is loaded, second time click will alert that data is loaded already.
您可以尝试以下代码：单击数据已加载后，第二次单击将提醒数据已加载。
$(".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");
}
});
working example here: http://jsfiddle.net/PDW35/4/
这里的工作示例：http: //jsfiddle.net/PDW35/4/
