На данный вопрос уже ответили:
Я пытаюсь сделать чтобы когда я ставлю или убираю галочку с чекбокса срабатывал метод. На метод .click
. Но метод не реагирует на смену состояния чекбокса. Как привязать метод к чекбоксу?
var checkbox = ('<input type="checkbox">');
// не срабатывает но почему?
$(checkbox).click(function () {
console.log("hello checkbox"); // ничего не выводит в консоль.
});
//печатает чекбоксы
$('#all_tasks').append(
$('<li></li>').append(checkbox));
Полный код:
//button id.
$("#get_all_task_but").click(function(){
// URL of servlet.
$.ajax({
url : 'get_all_tasks',
type : "post",
success : function (data) {
var data = JSON.parse(data);
$.each( data, function( key, value ) {
var $checkbox = $('<input type="checkbox"/>');
$(checkbox).click(function () {
console.log("hello checkbox"); // ничего не выводит в консоль.
});
$('#all_tasks').append(
$('<li></li>').append(
value['id'] + "<br>").append(
value['desc']+ "<br>").append(
value['create']+ "<br>").append(
checkbox + "<br>"));
});
}
});
});
В будущем данные полученные из чекбоксов надо будет сразу отправлять на сервер ajax запросом.
Давайте разберем построчно.
var checkbox = ('<input type="checkbox">');
// Теперь в checkbox записана строка с html
// Создаем из этой строки html элемент
$(checkbox)
// Вешаем на него обработчик
.click(function () {
console.log("hello checkbox"); // ничего не выводит в консоль.
});
// Находим на странице элемент с id = all_tasks
$('#all_tasks')
// Добавляем в него
.append(
// Созданный из строки элемент li
$('<li></li>')
//Добавляем еще один созданный из строки элемент (чекбокс)
.append(checkbox));
// Это не тот чекбокс, на который вы повесили обработчик.
var checkbox = ('<input type="checkbox">');
$(document.body).on('click', 'input[type=checkbox]', e => {
console.log("hello checkbox");
});
$('#all_tasks').append($('<li></li>').append(checkbox));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='all_tasks'></div>
var checkbox = '<input type="checkbox">';
document.body.addEventListener('click', e => {
if(e.target.tagName === 'INPUT' && e.target.type==='checkbox'){
console.log("hello checkbox");
}
});
document.getElementById('all_tasks').innerHTML += `<li>${checkbox}</li>`
<div id='all_tasks'></div>
В коде $(checkbox)
парсится и создаётся один DOM-элемент из строки, а в коде append(checkbox)
- другой.
Соответственно, раз обработчик события вы добавили первому элементу, а на страницу добавили второй, то обработчик первого элемента при клике на второй вызван не будет.
Если такой checkbox добавляется на страницу всего один, то можно создать один элемент, после чего добавить ему обработчик события и добавить его самого в #all_tasks
:
var $checkbox = $('<input type="checkbox"/>');
$checkbox.on("click", function() {
console.log("hello checkbox");
});
$('#all_tasks').append($('<li></li>').append($checkbox));
<ul id="all_tasks"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Если checkbox-ов создаётся много, то имеет смысл воспользоваться делегированием события, добавив checkbox-ам для их опознавания, например, класс:
$(document).on("click", ".hello", function() {
console.log("hello checkbox");
});
var $allTasks = $('#all_tasks');
var checkbox = "<input type='checkbox' class='hello'/>";
for (var i = 0; i < 10; i++) {
$allTasks.append($('<li></li>').append(checkbox));
}
<ul id="all_tasks"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
У меня есть input, в который нужно ввести число
Выводит: "Результат1: 35; результат2: 38," "Результат1: 22; результат2: 22, " " итого: 73" " итого: 44"
Доброго времени суток! Помогите пожалуйста отредактировать HTML шаблон, а конкретнее добавить по 7 вкладок справа, слева и снизу (таких как...