Sending ajax request when changing the state of the checkbox

Question

There is a table (generated by javascript) of the form:

row = $('<tr class="paid">'); row.append($('<td>').text(i + 1));

...

 row.append($('<td>').html('<input value="' + type + '" type="checkbox" checked id="' + dog.number + '">'));

how to send ajax when the checkbox state changes? The function of sending difficulties does not cause. with a static element is not difficult (addEventListener), but how to write a listener for a dynamic element is not possible.

Firstly, if you specify jquery in the tags, and in the code you clearly use it, then why write about addEventListener, then you should talk about something like $("#countries input:checkbox").change(function() {});
Secondly, if your content is dynamically generated, then it is either trite to wait for its formation and then hang the event in the same way as for a static one, or hang the event (s) at the moment of generating the code.
Read about asynchrony, in general, and the stages of triggering of a code, you can start with the function jquery.ready () - it’s not too much in the subject, you will understand the principle

Answer 1 · 2017-02-13T15:42:02

It’s not cool to hang a handler for each checkbox that is created, so it is reasonable to delegate the handling of the change event to the parent container. In this case, the table.

 $('table').on('change', 'input[type=checkbox]', function(){ var dataObj = { id: this.id, value: this.value } $.ajax({ data: dataObj, url: 'some.php', success: function(data){ console.log('Сервер вернул:' + data); } }); });

Answer 2 · 2017-02-13T15:39:18

You can hang an event on the element at the creation stage:

 let input = $('<input value="1" type="checkbox" checked id="check_id">'); input.on('change', function(){ console.log(this.checked); }) $('body').append(input);

 body{padding-bottom: 152px;}/*Из-за консоли*/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

You can also use event delegation:

 // Сгенерируем несколько строк for (let i = 1; i<=10; i++) { let row = $('<tr><td>'); let input = $('<input type="checkbox">'); input.val(i); row.append(input); row.append('<span>'+ i + '</span>'); $('#table').append(row); } $('#table').on('change', 'input[type=checkbox]', function(){ console.log(this.value, this.checked); })

 body{padding-bottom: 152px;}/*Из-за консоли*/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="table"></table>

.On documentation ()

Answer 3 · 2017-02-13T15:29:22

 row.append($('<td>').html('<input value="' + type + '" type="checkbox" checked id="' + dog.number + '" class="ajaxcheckbox">')); $(document).ready(function() { $("table").on("click", ".ajaxcheckbox", function(e) { $.ajax({ data: { id: this.id, value: this.value }, ... }); }); });

and about the code - maybe something is wrong with me, it just didn't work with a half-kick))

Answer 4 · 2017-02-13T15:40:54

 jQuery(document).ready(function($) { var i = 0; $('#add').click(function() { var row = $('<tr class="paid">'); i++; row.append($('<td>').text(i)); var check = $('<input type="checkbox" checked id="' + i + '">'); row.append($('<td>').append(check)); $('#data').append(row); check.click(function(){ console.log(this.id); }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="data"></table> <button id="add">Add</button>

Only there will always be 3 output, because at that time it is already thoroughly explored :)

Sending ajax request when changing the state of the checkbox

4 answers 4

More articles: