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

我创建了一个按钮，其属性名为'loaded'，初始值为'no'。点击按钮我正在运行一些Ajax，并在它的最后，我试图将“加载”属性设置为“是”，以便如果用户多次单击按钮，ajax不会再次运行。使用jQuery .attr或.prop设置属性值不起作用

我有这样的事情：http://jsfiddle.net/PDW35/2/

点击按钮不会改变加载到“是”。但是，如果你.attr呼叫这样做后，警报权：

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

警告框确实包含了“是”不帮助，因为一旦用户点击，相同的代码上面搭设屏幕上的“否”提醒框。

如果我使用.prop代替.attr，它的行为方式都是一样的。我是否在这里缺少一点，或.prop和.attr是否不适用于自定义属性？

编辑：基于下面的评论更新的jsfiddle用ajax：http://jsfiddle.net/PDW35/5/

来源

2013-08-01 mmvsbg

您是否正在查看原始源代码时检查'loaded'属性？因为它在Chrome – CodingIntrigue

中对我有用，我每次点击按钮，等等 - 它会提示yes。该属性设置正确。但是尝试使用以'data-'开头的允许属性并使用jQuery函数'data（）'来处理它们。 –

如果你正在编写你自己的属性，用'data-'前缀。另外，属性名称不能包含下划线。 – Blender

我并不完全确定的原因，原来的代码是不工作的原因，但$this似乎是出于某种原因的原因。尝试下面，它似乎工作。 Fiddle在这里。

我会尽快更新答案，并尽快找到答案。

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"); 
}

请参阅本thread，这似乎是原因$this似乎没有从AJAX调用内工作。

来源

2013-08-01 07:55:53 Harry

这很有趣，你是对的！现在运行，如果我找到$ this失败的原因，我会在这里发帖！ – mmvsbg

我认为$（this）只是在.ajax成功函数中没有定义（或者更可能是预定义的）。看看下面的JSfiddle：http://jsfiddle.net/PDW35/8/ 第一个警告框显示按钮的类，第二个只是说'未定义'。 – mmvsbg

@mmvsbg没有队友，请检查我对答案的更新。在Ajax调用中$这指的是调用，而不是触发事件的按钮。这就是为什么第一个警报（在ajax之外）起作用而另一个（内部）不起作用的原因。 – Harry

读的问题..

从而使Ajax不是再次，如果用户点击该按钮跑了超过一旦。

我认为你需要one()，它允许事件只运行一次..没有必要改变属性和特性

例如

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

来源

2013-08-01 07:28:28 bipen

这是一个很好的提示，然而，我点击按钮时做的其他事情之一是.slideToggle一个div，需要多次发生。我只想加载一次ajax（它进入div上下滑动）。 – mmvsbg

您可以设置属性为您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 
});

来源

2013-08-01 07:37:06

你可以试试foll欠款代码：一旦你点击数据加载，第二次点击将提醒数据已加载。

$(".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/

来源

2013-08-01 07:41:14 maverickosama92

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

回答

相关问题