JQuery on checkbox check

[justinweb]

I have been trying to get a delete button to appear only when a checkbox is checked.

For some reason, I cannot get this to happen.

I am using JQuery AJAX to fetch all the rows in a MySQL table and format it into an [li] element to create a list of post.

Every [li] contains a [input type=”checkbox”] with a class=”select_post”. Each text box also has a value=”” of the post ID in the MySQL table.

I’ve been trying to figure out how to find out if a checkbox is checked to have the delete post appear, but nothing goes.

$(‘.checkbox’).click( function () {…}); – didn’t work
$(‘.checkbox’).change( function () {…}); – didn’t work
$(‘.checkbox’).mouseon( function () {…}); – didn’t work

What is it that I am not doing right?

This is the function that is “supposed” to let me know when a checkbox is checked.

$(‘.select_post’).click( function () {
alert(‘click’);
$(‘#delete_post_button’).css(‘display’, ‘block’);
});

And just to understand the way I get and format that posts, here is my AJAX function…

$(window).ready( loadPosts () );
function loadPosts () {
$.ajax({
type: ‘POST’,
url: ‘load_posts.php’,
data: ”,
dataType: ‘json’,
success: function ( rows ) {
$(‘#post_list’).empty();
for ( var i in rows ) {
var row = rows,
id = row[0],
date = row[1],
title = row[2],
postContent = ‘

[Paulie_D]

Check boxes are ‘checked’ when ‘selected’ aren’t they?

Thus “checked” is an attribute.

http://codepen.io/Paulie-D/pen/EdGzi

http://api.jquery.com/checked-selector/

[justinweb]

Technically they are, but how do you always listen to all of the checkboxes in a list for when they change state ?

[Paulie_D]

I have very little knowledge of Js/JQ but I would assume that you can apply any event handler to each/every ‘item’.

[Podders]

The problem is because you are injecting the checkboxes into the dom after the dom is ready, so any event handlers that you atatch on document ready will not get atatched to the ajax loaded content,

The quickest solution if you are using jQuery V1.7 or above is to use the .on() function, this will add event handlers to elements that already exist and/or are injected into the dom after the document is ready,

$(‘.select_post’).on(‘click’, function () {
alert(‘click’);
$(‘#delete_post_button’).css(‘display’, ‘block’);
});

[justinweb]

Oh I see, so new elements loaded after the dom is loaded is no ‘Seen’ by the script. Nice one thank you guys!

[Podders]

@Hompimpa, you don’t need to re-call or even repeat the the function after the elements have been injected, the beauty of the .on() function is that it will attach the event hander to any existing or any element added to the dom that matches the selector,

@justinweb, the document.ready function you have posted also seems wrong to me, it may work but i’ve never seen a $(window).ready call used,

Try the following code should work,

$(document).ready(function(){

$(‘.select_post’).on(‘click’, function () {
alert(‘click’);
$(‘#delete_post_button’).css(‘display’, ‘block’);
});

$.post(‘load_posts.php’,function(rows){
$(‘#post_list’).empty();
$.each(rows,function(i){
var row = rows,
id = row[0],
date = row[1],
title = row[2],
postContent = ‘

‘ +
‘‘ +
‘

‘ +
‘‘ +
‘‘ +
‘‘ +
‘

‘ +
‘‘ +
‘

‘ + date + ‘

‘ +
‘!‘ +
‘

‘;
$(‘#post_list’).append(postContent);
});
});

});

[Author]

Posts