We Keep Coding

jQuery .on click event doesn't always fire on Ajax loaded content

I have a page where I dynamically load contents. Inside the $(document).ready I have similar event handlers:
$(document).on("click", ".content_button", function(e){
e.preventDefault();
e.stopPropagation();
// content
});
The problem is that the mouse click only recognised at around 90% of the clicks. It seems totally random. At other times I have to push the same button 4-5 times, and then it works. I have no error in the console, even the CSS part works every time:
div.content_button:active {
top: 2px;
}
I can't seem to find a solution. I use jQuery 1.11, it works like this on Win10, Win7, inside Firefox, and even on iPad or Android.
Do you have any ideas about what can be the problem?
Edit:
data.control contains the .content_button divs (buttons) in HTML.
And here is the part, which loads the buttons:
$.ajax({
url: 'worker.php',
async: false,
cache: false,
type: "POST",
data: { action:"update" },
dataType: "json",
success:function(data) {
if(data.actionresult == 1)
{
$('div#container').hide("slide", { direction: "down" }, 500);
$('div#container').promise().done(function() {
$('div#container').html(data.control);
$('div#container').show();
});
}
else
{
// handle error
}
}
});

$(document).ready(function(){
$(".content_button").on("click", function(e){
e.preventDefault();
e.stopPropagation();
// content
});
});
It must be done like this.

Have you tried with
$(function() {
var count = 0;
$('body').on('click', '.content_button', function() {
count++;
$('#count').html(count);
});
});
https://jsfiddle.net/byexstpq/

Ok, I have found the problem, it is this:
div.content_button:active {
top: 2px;
}
On mouseDown it moves 2 pixels, so it is possible that the link won't be there after a mouseUp - so technically the click event won't fire as the mouseUp happens over another element.
I hope this will help others.

Masonry items not reloaded when cliking ajax load more button

Hi everyone i have one problem about masonry items.
I have created this DEMO from codepen.io
In this demo you can see there is this javascript code:
$(window).load(function()
{
$( function() {
var $container = $('.posts-holder');
$container.masonry({
isFitWidth: true,
itemSelector: '.kesif-gonderi-alani'
});
});
});
I show only 10 posts when a page is opened. If user want to show other 10 posts then user needs to click (show more button). I created this ajax function for show more posts.
$('.showmore').live("click",function(event)
{
event.preventDefault();
var ID = $(this).attr("id");
var P_ID = $(this).attr("rel");
var URL=$.base_url+'diger_fotograflar_ajax.php';
var dataString = "lastid="+ ID+"&profile_id="+P_ID;
if(ID)
{
$.ajax({
type: "POST",
url: URL,
data: dataString,
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="wall_icons/ajaxloader.gif" />'); },
success: function(html){
$("div.posts-holder").append(html).each(function(){
$('.posts-holder').masonry('reloadItems');
});
$("#more"+ID).remove();
}
});
}
else
{
$("#more").html('The End');// no results
}
return false;
});
this code working when clicking showmore button $('.posts-holder').masonry('reloadItems'); but collecting new posts in one place. But when I change the width of the page everything is improving.

I think that you can use $container.masonry(); after adding your elements, like this :
$("div.posts-holder").append(html).each(function(){
$('.posts-holder').masonry('reloadItems');
});
$container.masonry();
You can see it working here.
Hope that can help.

you have to use the appended method of masonry ... otherwise how would it know that you have added any new element.
Adding the elements simply wont align them as masonry doesnt have any event listner for new element added.
var el = $('<div class="kesif-gonderi-alani" style="height:300px;"></div>')
$container.masonry().append( el ).masonry( 'appended',el );
Hers is small demo on codepen http://codepen.io/knaman2609/pen/xbJMRY
Click on the button to append elements dynamically
http://masonry.desandro.com/methods.html

To stop document.click function on key up

To hide a div on click on the rest of the page I used
$('#display').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('#display').slideUp();
});
Now I want make the function document.click work only if a user is not typing any text in text box with id "mse".
<input type="text" id="mse" name="search">
I tried like this:
$(document).click(function(){
if($( "#mse" ).keyup()){
//do nothing
}else{
$('#display').slideUp();
}
});
But it doesn't worked.
Help me to overcome this problem.
My total code is:
$(document).ready(function(){
$("#mse").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search.jsp",
data: dataString,
cache: false,
success: function(html)
{
$("#smartscreen").html(html).show();
}
});
}return false;
});
$('#mse').focus(function(){
$('#display' ).css( "display", "block" );
});
$('#display').click(function(e){
e.stopPropagation();
});
});
$(document).click(function(e){
$('#display').slideUp();
});

You might want to turn the document's click event on and off. Here are the ingredients for that:
.on() with namespacing of the event
.off()
.focus() and .blur()
Then, depending on what you need, do something like this: when the "mse" element gets focused, turn off the document's click event. When the "mse" element gets blurred, turn the document's click event back on. Example in this JS Fiddle
relevant code from the JS Fiddle:
$('#mse').focus(function(){
$(document).off('click.slider');
$('#display').css('display', 'block');
});
$('#mse').blur(function(){
$(document).on('click.slider', function(e){
$('#display').slideUp();
});
});

It works using div on body. It doesn't using get

Status: WORKING
Runs smoothly - click works
Jquery
$("document").ready(function(){
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
<div class="blue" id="test">Testing code</div>
</body>
Status: NOT WORKING
Succeeds to add the file and div test within it but click doesn't work
Jquery
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
});
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
</body>
Does anybody know how to do that?

The method get is asynchronous which means that the stream will continue while the ajax request is still running, the best solution is to put the click handler into the get callback.
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
});

You should delegate the event, from one of static parents of the element or document object.
$(document).on("click", "#test", function(){
alert("abc");
})

use delegate or on(recommend)
$(function() {
$('body').on('click', '#test', function() { alert('abc'); });
// or
// $('body').delegate('#test', function() { alert('abc'); });
});

problem is the the click function is called before the div with #test is appended...
call click function after the div is appended.. so that it gets that id... and the event
try this
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
OR
the on function with selector as document..(i alway prefer to go with this)
$(document).on("click", "#test", function(){
alert("abc");
})

jQuery, Shadowbox and AJAX

I would like to load some content using AJAX and Shadowbox
Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-
1) Cancel the click event i.e the User must not go to a different page.
2) Load content using ajax function in jQuery
3) Show the content inside a shadow box
My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "/ajax-post.php?p="+id,
success: function(data){
Shadowbox.open({
content: data,
player: "html",
height: 350,
width: 350
});
}
});
return false;
});
UPDATE 1
tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.
Shadowbox.init({
skipSetup: true,
players: ["html"]
});
// LOAD
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('.post h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id,
success: function(data){
show_box(data);
}
});
return false;
});
});
//shadowbox
function show_box(html) {
Shadowbox.open({
content: html,
player: "html",
height: 350,
width: 350
});
}
UPDATE 2
Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.
Why is this happening ? Any ideas ?

Since you're not getting any JavaScript errors try debugging by breaking it down:
Ensure that the binding to and overriding of the click event is functioning properly:
$('h2 a').bind('click', function() {
alert('click even fired');
return false;
});
If that works, check the data that your ajax request is returning:
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "ajax-post.php?p="+id,
success: function(data){
alert(data);
}
});
return false;
});
The code looks like it should work, so I'm guessing there's either something wrong elsewhere (in which case the first test will likely fail) or you're getting some really odd data returned.

Need to run
Shadowbox.setup('h2 a');
This will reinitialise and bind it to any ajax loaded content