Reputation: 57
I apologize in advance if the title doesn't really describe my problem. I'm still new to javascript/jquery, and this is how I understand the problem...
I'm using a button to call up a function that appends an element to my webpage.
<button id="bartspbyu" class="btn btn-xs btn-success add-alert" onClick="this.disabled = 'disabled';">Add</button>
As you can see, when it's clicked, it disables itself. It also uses a script to change the text from "Add" to "Added":
$('.add-alert').on('click', function() {
$('#added-alert').fadeIn('slow');
setTimeout(function() {
$('#added-alert').fadeOut('slow');
}, 2000);
$(this).text('Added');
});
The user has the option to then delete the element they added. When they delete the element, the button becomes enabled again, using the following script:
//Reactive Add Button
$(document).on("click", ".drartspbyu", function (){
$("#bartspbyu").removeAttr("disabled");
});
This works just fine, however I'm trying to get it to change the text in the button back to "Add". I did the following:
//Reactive Add Button
$(document).on("click", ".drartspbyu", function (){
$("#bartspbyu").removeAttr("disabled", function (){
$(this).text('Add');
});
});
It's enabling the button again, but it's not editing the text. I'm not sure if I've set up $(this)
incorrectly or if the entire thing is wrong.
I realize that I could do something like $("#bartspbyu").text('Add');
, but the reason I'm using $(this)
is because there are hundreds of these add buttons and I don't want to have to spend hours editing each individual ID (#bartspbyu is just one of over 400). If I can find a way to get it to read #bartspbyu from the first instance that it's mentioned, that would save me hours of work since I would only have to do a Find + Replace and add this extra line of code to everything.
Thanks in advance for the help! Again, I'm still new at this, so I realize I'm probably missing something super obvious.
Upvotes: 1
Views: 84
Reputation: 17358
removeAttr()
does not have a callback function (http://api.jquery.com/removeAttr/). You should just append to the text() since you want to apply it to the same element.
$("#bartspbyu").removeAttr("disabled").text("Add");
jQuery allows you to 'method-chain' functions. the $("")
constructor constructs an object to which you can consequently apply multiple things, like removing an attribute and then changing the text. It works as if you typed:
$("#bartspbyu").removeAttr("disabled")
$("#bartspbyu").text("Add")
The advantage being that you don't actually need to repeat yourself. Also, because removeAttr()
does not have a callback function (it only takes the name of the attribute as a parameter), it will not execute the anonymous function you passed it as it is not intended to do so.
Upvotes: 4
Reputation: 1261
I would also suggest getting rid of the inline javascript and just adding the disabling code to that first block of jquery you have.
Upvotes: 1
Reputation: 82337
I don't think that the second argument of removeAttr is a callback. Instead, just take advantage of chaining
$("#bartspbyu").removeAttr("disabled").text('Add');
Upvotes: 3