Как связать чекбокс с вызовом метода? [дубликат]

251
18 июля 2017, 19:38

На данный вопрос уже ответили:

  • Добавлять обработчик события ко всем новодобавленным элементам 2 ответа
  • События javascript после динамического добавления контента 7 ответов

Я пытаюсь сделать чтобы когда я ставлю или убираю галочку с чекбокса срабатывал метод. На метод .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 запросом.

Answer 1

Давайте разберем построчно.

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>

Answer 2

В коде $(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>

READ ALSO
jquery не подхватывает ссылку с json [дубликат]

jquery не подхватывает ссылку с json [дубликат]

На данный вопрос уже ответили:

262
Поправить работу функции по событию change jquery

Поправить работу функции по событию change jquery

У меня есть input, в который нужно ввести число

386
передача данных из одного запроса в другой

передача данных из одного запроса в другой

Выводит: "Результат1: 35; результат2: 38," "Результат1: 22; результат2: 22, " " итого: 73" " итого: 44"

253
Редактирование шаблона HTML

Редактирование шаблона HTML

Доброго времени суток! Помогите пожалуйста отредактировать HTML шаблон, а конкретнее добавить по 7 вкладок справа, слева и снизу (таких как...

291