jQuery, как заменить имя класса в href и одновременно щелкнуть его, чтобы запустить функцию
Вопрос
У меня есть ссылка href, как показано ниже
<a href="#" class="add_encounter">Add</a>
на $(document).ready
я запускаю эту функцию, как показано ниже
$('.add_encounter').click(function(event) {
add_encounter(encounters);
event.preventDefault();
});
В функции add_encounter я изменил имя класса ahref из add_encounter, чтобы встретиться с Encountersubmitter, и хочет нажать на то же самое, чтобы запустить другую функцию, но когда я нажимаю на ссылку, она запускает функцию и изменяет имя класса, чтобы встретиться с помощью и изменить обратно в тот же класс, т.е.add_enounter
function add_encounter(encounters) {
if ($('.add_encounter').text() == "Add"){
$('.add_encounter').removeClass().addClass("encounterSubmitter")
}
$('.encounterSubmitter').click(function(event) {save(); event.preventDefault();});
}
функция сохранения, как показано ниже
function save() {
var encounter = $('#name').val();
var key = $('#encounterKey').val();
if (key == '') {
key = null
}
if (encounter == ''){
cancel_encounter()
}
}
cancel_encounter, как показано ниже
function cancel_encounter() {
$('.encounterSubmitter').removeClass().addClass("add_encounter")
$('.add_encounter').text("Add")
}
Таким образом, он идет на сохранение функции, проверяет условие, и переходит на функцию cancel_encounter и изменяет имя класса обратно на add_encounter
Я знаю, что этот вопрос немного сбивает с толку, но я надеюсь, что понимание его или когда-либо сталкивался с такой проблемой, сможет дать мне решение.
Решение
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();
});
Другие советы
Не могу проверить это правильно, но, возможно, это сработает:
$('.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")
}
Проблема заключалась в том, что функция сохранения вызывалась вашей функцией add_encounter.Поэтому он проверит ваш ключ и, в свою очередь, вызовет функцию cancel_encounter, сбрасывающую ссылку.
Живой вызов будет работать, даже если ваши элементы для привязки будут загружены после загрузки javascript.