Conflict mulitple.load () jquery events

Question

I am loading data with the file $('#result').load('test.php') , which fully works correctly.

here is a screenshot of test.php

now here is my uploaded file in lightbox:

In my test.php file, I also upload another lightbox file with a click event. The lightbox is displayed correctly with the new downloaded file. here is the code to call lighbox:

 jQuery('#wt_opp_coll .coun').click(function(){ jQuery(this).jpLightBox({ width: 500, height: 250, url: 'components/content/test_file.php' //message: 'Just Testing the file' }); }); 

with this, my new downloaded file test_file.php appears well in the lightbox, but my last downloaded test.php file disappears into the lightbox, as you see on the second screen, only the lightbox is not displayed in details in the background, as in the first screen version,

Please help me also terminate my last downloaded file ( test.php ).

NOTE. I also used the .load() function in lighbox to load the URL.

Answer 1

I haven’t done anything with LightBox, but could the problem be replacing #wt_opp_coll .coun with a new lightbox?

 jQuery('#wt_opp_coll .coun').click(function(){ jQuery(this).jpLightBox({ width: 500, height: 250, url: 'components/content/test_file.php' //message: 'Just Testing the file' }); }); 

The second line has jQuery(this) , which points to the parent #wt_opp_coll .coun . So I think what happens is that the lightbox replaces the contents of #wt_opp_coll .coun .

Answer 2

I can’t tell you what causes this strange problem, but I also had a problem with it a while ago. The way I solved this is to use livequery to handle click events. Do not ask me why, I spent hours browsing libraries and documentation, and also trying to find an answer from others to no avail.

Take a picture if you have no problem using livequery, this might be your solution.

Here is a snippet of my code, it is used for 50 different instances of a load call, all of which work. Some of them were dynamically linked to other loaded data.

 function ajaxContent(link, sel, reg, extReg) { $(sel).not(link).removeClass("active"); $(link).addClass("active"); var toLoad = $(link).attr('href')+ ' ' + extReg; $(reg).fadeOut('slow',loadContent); function loadContent() { $(reg).load(toLoad,'',showNewContent()) } function showNewContent() { $(reg).delay(200).fadeIn('slow'); } } $(document).ready(function() { // Top left "main" nav $('#jax-nav li a').livequery("click", function(event) { ajaxContent(event.target, '#jax-nav li a', '#page-content', '#ajax-out'); return false; }); 

Answer 3

try putting an empty div in your html for lightbox

 <div id="lightBoxDiv"></div> 

and edit your code

 jQuery('#wt_opp_coll .coun').click(function(){ jQuery("#lightBoxDiv").jpLightBox({ width: 500, height: 250, url: 'components/content/test_file.php' //message: 'Just Testing the file' }); }); 

you will also need to clear this div content on the close button, otherwise it will affect your base html

put this code in your close button

 $("#lightBoxDiv").html('');