Action jquery inside an AJAX call

This site is best viewed in a modern browser with JavaScript enabled.

zebedeee

Hi All,

It's hard to get a code sample running as this is a Wordpress site on my localhost. Anyway I shall try to explain and if anyone can send me off in the right direction great.

Basically when you click a div a box slides down and calls in the wordpress post information relating to the div id clicked.

This all works but once I am inside the slidedown i want some more click events.

This is the function which works well outside of the AJAX call but not inside the slidedown box where I need it working. It simply swaps the image in a div with the image contained within the data-href link.

$(function () {
  $(".subnav a").click(function (e) {
     var url = $(this).data('href')
    $('#imageBox img').prop('src', url)
  return false;
 });
});

This is how I have the AJAX working to call in post data:-

$.ajaxSetup({cache:false});
 var post_link = $(this).attr("rel");
 $("#panel").empty().html("loading...");
 $("#panel").load(post_link);	  

//return false;	 
var height = $("#panel").height();
  if( height > 0 ) {
    $('#panel').css('height','0');
  } else {
  var clone = $('#panel').clone()
	.css({'position':'absolute','visibility':'hidden','height':'624px'})
	.addClass('slideClone')
	.appendTo('body');

  var newHeight = $(".slideClone").height();
  $(".slideClone").remove();
  $('#panel').css('height',newHeight + 'px');
}
});

$('.close').click(function() {
  $('#panel').css('height','0');
});

Sup3rkirby

Bare with me as I'm trying to grasp the full concept of what your site/page does without seeing any of it. I'm thinking that you want to run the first block of code you have after the new content loads, which would apply the click function to all of the new elements that are on the page (and weren't present when that block first ran).

So you end up with something like...

$.ajaxSetup({cache:false});
var post_link = $(this).attr("rel");
$("#panel").empty().html("loading...");
$("#panel").load(post_link, function () {
  $(".subnav a").click(function (e) {
    var url = $(this).data('href');
    $('#imageBox img').prop('src', url);
		return false;
 });
});	  

//return false;	 
var height = $("#panel").height();
  if(height > 0) {
    $('#panel').css('height','0');
  } else {
		var clone = $('#panel').clone()
		.css({'position':'absolute','visibility':'hidden','height':'624px'})
		.addClass('slideClone')
		.appendTo('body');

  var newHeight = $(".slideClone").height();
  $(".slideClone").remove();
  $('#panel').css('height',newHeight + 'px');
}
});

$('.close').click(function() {
  $('#panel').css('height','0');
});

zebedeee

Hello and thank you so much for looking at my code.

I gave your solution a try and it's not working. I tried something similar before and there must be something stopping it working once inside the AJAX call.

I can PM you a link to the website if that is any help. Only if you have time as there is no rush.

Sup3rkirby

I'm certainly willing to take a look if you don't mind. It's definitely a lot easier to debug with live/running code than it is when looking at the text.