Question

We have uplaod function on our site. And uploaded file, displays link which on click user can see file they have uploaded in new window.

We also use divbox http://jquery.phpbasic.com/divbox

My code is this:

$("#uploader" + queueId).html("
 <div class='cancel'>
  <input class='button_cancel' name='removeFile' fileName='"
  +fileObj.name.replace("'", "%27")+"' type='button'>
   </div>
  <a class='lightbox' href='" + self.attr("path") 
   + fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>");

For some reason when we click on the link, it still opens in new window and doesnt initiate the lightbox.

In my page i see this ( all normal )

<a class="lightbox" href="uploads/nutshell.png">
 <span class="fileName">nutshell.png</span>
</a>

Which should fire the lightbox.. Anything scream out at you in the js code I posted above ? I am wondering if its self.attr(“path”)

Here is what we have::::::

in the js for divbox we have

$('.lightbox').divbox({caption: false});

in the js for the uploader we have.

$("#uploader" + queueId).html("<div class='cancel'><input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'></div><a class='lightbox' href='" + self.attr("path") + fileObj.name.replace("'", "%27") + "'><span class='fileName'>"+fileObj.name+"</span></a>");

Answer 1

Presumably you’re doing something like this:

$('a.lightbox').divbox({ ... })

before you add the <a> in question with:

$("#uploader" + queueId).html("...");

$('a.lightbox') only applies to elements that exist on the page when $('a.lightbox') is called, it won’t bind DivBox to elements that are added to the page later. You’ll have to bind DivBox to the new <a> that you added with something like this:

$("#uploader" + queueId).html("...");
$('#uploader' + queueId).find('a.lightbox').divbox({ /* and whatever options you need */ });

Rough demo of the technique: http://jsfiddle.net/ambiguous/EswfB/