[英]How to disable the click on an icon after one click?
After clicking on the icon with ids ( #prevleft
and #nextright
) , an ajax
function is called. 单击具有ID(
#prevleft
和#nextright
)的图标后,将调用ajax
函数。 During the time ajax function loads a new table, I want to disable
the icon click
. 在ajax函数加载新表的过程中,我想
disable
icon click
。
HTML Code: HTML代码:
hrHTML='<tr><th colspan="5"><i class="icon icon-chevron-left icon-2x lr"
style="float:left;" title="Previous Five Weeks"
id="prevleft"></i>' +"Weekly Utilization"+'<i class="icon icon-chevron-right
icon-2x lr" style="float:right;" title="Next Five Weeks" id="nextright"
></i></th>
</tr>';
The table row is appended dynamically as shown above. 表格行被动态附加,如上所示。 Want to disable
#prevleft
and #nextright
after one click. 想要在单击后禁用
#prevleft
和#nextright
。
The following line doesn't work:
以下行不起作用:
$('#prevleft').prop("disabled", true);
$('#prevleft')。prop(“ disabled”,true);
I am new to coding, so all help is appreciated. 我是编码的新手,因此感谢所有帮助。
You have attached an event listener to one or more elements that do not yet exist in document
. 您已将事件侦听器附加到
document
尚不存在的一个或多个元素。 You can use event delegation, or jQuery()
function to attach event to element when created. 创建事件时,可以使用事件委托或
jQuery()
函数将事件附加到元素。
Pass html
string to jQuery()
, use .find()
to get "#prevleft"
, #nextright
selectors, attach click
event using .one()
, append jQuery()
object to document
将
html
字符串传递给jQuery()
,使用.find()
获得"#prevleft"
, #nextright
选择器,使用.one()
附加click
事件,将jQuery()
对象附加到document
$(elementWherehrHTMLIsAppended)
.append(
$(hrHTML)
.find("#prevleft, #nextright")
.one("click", function() {
$(this).prop("disabled", true)
}).end()
);
Just check with the version of the jquery your using, I hope that your using jquery 1.5 or below 只需检查您使用的jquery版本,希望您使用的jquery 1.5或更低版本
For jQuery 1.6+ 对于jQuery 1.6+
Use can use .prop()
function: 使用可以使用
.prop()
函数:
$('#prevleft').prop("disabled", true);
$("#nextright").prop("disabled", true);
For jQuery 1.5 and below 对于jQuery 1.5及更低版本
You need to use .attr()
and disable the icon 您需要使用
.attr()
并禁用图标
$("#prevleft").attr('disabled','disabled');
$("#nextright").attr('disabled','disabled');
and for re enable the icon (remove attribute entirely): 并重新启用该图标(完全删除属性):
$("#nextright").removeAttr('disabled');
$("#prevleft").removeAttr('disabled');
Assuming you have an event handler on a icon, in any version of jQuery you can use the following property to check if your icon is enabled or not 假设您在图标上具有事件处理程序,则在任何版本的jQuery中,您都可以使用以下属性检查您的图标是否已启用
if (this.disabled){
// your logic here
}
Bind simple a click event when clicked on prevleft and prevright id icon. 单击prevleft和prevright id图标时,绑定简单的click事件。
$("body").on("click","#prevleft ,#prevright",function(){
var _this = $(this);
$(this).prop("disabled","true");
// ajax call code right here
// on ajax success function right this line
success: function(resp){
_this.prop("disabled","false");
}});
})
You can add a class to the element and check for the class when the user clicks. 您可以将一个类添加到元素中,并在用户单击时检查该类。
For example:
$('#prevleft').click(function(){
if($(this).hasClass('clicked')){
// do nothing or return false
}else{
// ajax call
// on a successful call you can add the class using:
$('#prevleft').addClass('clicked');
}
});
Let me know if this is what you were asking for. 让我知道这是否是您要的。 This also gives you the ability to add an alert or do something if the button was already clicked.
这也使您能够添加警报或在已单击按钮的情况下执行某些操作。 Hope this helped!
希望这对您有所帮助!
Try my code, this event only called when icon hasn't class 'clicked', in the first call we will add 'clicked' class to prevent this event from this time. 尝试我的代码,此事件仅在图标未分类为“单击”时才调用,在第一个调用中,我们将添加“ clicked”类以防止此事件从此时开始。
$('#prevleft:not(.clicked), #nextright:not(.clicked)').on('click', function(){
$(this).addClass('clicked');
});
Hope this can help you! 希望这可以帮到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.