jQuery: установить текст для таблицы с двойным щелчком

Question

У меня есть несколько таблиц с загруженным содержимым ajax. Иногда мне приходится вручную изменять содержимое файла td, прежде чем экспортировать его в PDF, поэтому я подумал, что лучший способ - создать триггер для каждого td с двойным щелчком мыши, используя jQuery's .dblclick(). Триггер откроет модальный с полем input и изменит текст двойного щелчка td при отправке модального.

Это работает, но когда я изменяю содержимое второго, третьего и т. Д. td, каждый ранее нажатый td получает новое значение.

Проверьте мою скрипку: https://jsfiddle.net/fvoufq07/

Мой код до сих пор:

$(".sitename").dblclick(function() { 
    var sitename = $(this); 
    $("#msgBox .modal-title").html("Change sitename"); 
    $("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
    $("#msgBox").modal("show"); 
    $("#msgBox button.btn").click(function() { 
    sitename.text($("#new_sitename").val().trim()); 
}); 

}); 

Answer 1

Это потому, что вы повторно использовать ту же кнопку для модальной. Поэтому каждый раз, когда модаль открывается, вы добавляете нового слушателя на кнопку, но вы не убиваете предыдущий.

Вы можете убить предыдущий слушатель off:

$(".sitename").dblclick(function() { 
    var sitename = $(this); 

    $("#msgBox .modal-title").html("Change sitename"); 
    $("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
    $("#msgBox").modal("show"); 
    $("#msgBox button.btn").off('click').click(function() { 
     sitename.text($("#new_sitename").val().trim()); 
    }); 

}); 

Answer 2

попробовать это

$(".sitename").dblclick(function() { 
sitename = $(this); 
$("#msgBox .modal-title").html("Change sitename"); 
$("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
$("#msgBox").modal("show"); 
$("#msgBox button.btn").click(function() { 
    sitename.text($("#new_sitename").val().trim()); 
}); 

});

Krupesh Kotecha бить меня тоже;)

Answer 3

Попробуйте

var sitename; 
$(".sitename").dblclick(function() { 
    sitename = $(this); 
    $("#msgBox .modal-title").html("Change sitename "); 
    $("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
    $("#msgBox").modal("show"); 
}); 

$("#msgBox button.btn").click(function() { 
     $(sitename).text($("#new_sitename").val().trim()); 
    }); 

здесь обновляется jsfiddle

Answer 4

Проблема вы видите, что функция нажмите добавить к кнопке

$("#msgBox button.btn").click(function() { 
    sitename.text($("#new_sitename").val().trim()); 
}); 

не удаляется. Из-за этого, каждый раз, когда вы открываете модель заново, вы меняете текст любого ранее щелкнутого .sitename, а также нового клика.

Для того, чтобы избежать этого, вы должны удалить событие щелчка, или еще лучше использовать .one() функцию JQuery, которая будет только огонь обратного вызова на первом экземпляре события запуска:

$("#msgBox button.btn").one('click', function() { 
    sitename.text($("#new_sitename").val().trim()); 
}); 

Обновлено скрипку:https://jsfiddle.net/fvoufq07/6/

Update: выше решение не улавливает проблему открытия модального затем закрытия без нажатия на кнопку «закрыть» сохранить.

Есть несколько способов, чтобы исправить это: либо использовать .off() перед добавлением нового .one() обратного вызова, или снова использовать .off(), но условно после закрытия модального с использованием hidden.bs.modal триггера bootstap в.

$("#msgBox").one('hidden.bs.modal', function() { 
    $("#msgBox button.btn").off('click'); 
}); 

Вы также можете назначить 'click' слушателя переменный, так что вы можете удалить, что слушатель конкретно, что будет полезно, если у вас есть другие 'click' слушателей на тот же элемент.

var updateText = $("#msgBox button.btn").one('click', function() { 
    ... 
}); 
$("#msgBox").one('hidden.bs.modal', function() { 
    $("#msgBox button.btn").off('click', updateText); 
}); 

Обновленная скрипка на https://jsfiddle.net/fvoufq07/7/ имеет пример.