jQuery how to replace className of a href and click that sametime to run the function
I have a href link is as below
<a href="#" class="add_encounter">Add</a>
on $(document).ready
i run this function is as below
$('.add_encounter').click(function(event) {
add_encounter(encounters);
event.preventDefault();
});
on add_encounter function i changed class name of ahref from add_encounter to encounter encounterSubmitter and wants to click that same to run other function but when i click the link it runs the function and change the classname to encounterSubmitter and change back to same class i.e. add_enounter
function add_encounter(encounters) {
if ($('.add_encounter').text() == "Add"){
$('.add_encounter').removeClass().addClass("encounterSubmitter")
}
$('.encounterSubmitter').click(function(event) {save(); event.preve开发者_高级运维ntDefault();});
}
save function is as below
function save() {
var encounter = $('#name').val();
var key = $('#encounterKey').val();
if (key == '') {
key = null
}
if (encounter == ''){
cancel_encounter()
}
}
cancel_encounter is as below
function cancel_encounter() {
$('.encounterSubmitter').removeClass().addClass("add_encounter")
$('.add_encounter').text("Add")
}
So it goes to save function checks the if condition and goes to cancel_encounter function and changes the classname back to add_encounter
I know this question is little confusing, i hope however understand it or ever came across this kind of problem can able to give me the solution.
HTML
<a href="#" class="add my_encounter">Add</a>
JS
$('.my_encounter').bind('click', function(event) {
if ((this).hasClass('add')){ //add_encounter
//encounters ???
$(this).removeClass('add').addClass("submitter")
}
else if ((this).hasClass('submitter')){ // save
var encounter = $('#name').val(),
key = $('#encounterKey').val();
if (key == '') {
key = null
}
if (encounter == ''){
// cancel_encounter
$(this)
.removeClass("submitter")
.addClass("add")
.text("Add"); //?? where remove text "Add"
}
}
event.preventDefault();
});
Not able to test this right but maybe this will work:
$('.add_encounter').click(function(event) {
add_encounter(encounters);
event.preventDefault();
});
function add_encounter(encounters) {
if ($('.add_encounter').text() == "Add"){
$('.add_encounter').removeClass().addClass("encounterSubmitter")
}
}
$('.encounterSubmitter').live('click',function(event){
save();
event.preventDefault();
});
function save() {
var encounter = $('#name').val();
var key = $('#encounterKey').val();
if (key == '') {
key = null
}
if (encounter == ''){
cancel_encounter()
}
}
function cancel_encounter() {
$('.encounterSubmitter').removeClass().addClass("add_encounter")
$('.add_encounter').text("Add")
}
The problem was the save function being called by your add_encounter function. Therefore he would check your key and in turn call the cancel_encounter function resetting the link.
The live call will work even if your elements to bind to are loaded in after the javascript has loaded.
精彩评论