Home › Forums › JavaScript › JQuery on checkbox check
- This topic is empty.
-
AuthorPosts
-
March 21, 2013 at 11:56 am #43552justinwebMember
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 workWhat 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 = ‘- ‘ +
‘‘ +
‘‘ +
‘‘ +
‘‘ +
‘‘ +
‘‘ +
‘‘ +
‘‘ + date + ‘
‘ +
‘‘;
$(‘#post_list’).append(postContent);
}
}
});
}March 21, 2013 at 12:03 pm #129188Paulie_DMemberCheck boxes are ‘checked’ when ‘selected’ aren’t they?
Thus “checked” is an attribute.
March 21, 2013 at 12:05 pm #129190justinwebMemberTechnically they are, but how do you always listen to all of the checkboxes in a list for when they change state ?
March 21, 2013 at 12:09 pm #129193Paulie_DMemberI have very little knowledge of Js/JQ but I would assume that you can apply any event handler to each/every ‘item’.
March 21, 2013 at 12:21 pm #129202PoddersParticipantThe 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’);
});March 21, 2013 at 3:00 pm #129243justinwebMemberOh I see, so new elements loaded after the dom is loaded is no ‘Seen’ by the script. Nice one thank you guys!
March 21, 2013 at 5:12 pm #129269PoddersParticipant@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);
});
});});
- ‘ +
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.