0

I have been bashing my head against a wall for about 4 hours now trying to figure out why this wont work. I have a program that needs to dynamically write code depending on the number of results from an SQL query.

I am using a jquery lightbox called EasyBox. When it is hard-coded like this, it works:

<body id="body" onload="bodyLoaded()">
<a id="link" href="#test" title="Snowflake" rel="lightbox">Hello</a>
<div id="test" style="display:none; width:320px; height:240px">
 <p>Test Content</p>
</div> 
<script type="text/javascript">
 function bodyLoaded(){
 $('#link').attr('onclick', 'logText("Hello")');
 }
 function logText(message){
 console.log(message); 
 }
</script>

However, when I have the link written dynamically like this, the EasyBox popup does not fire.

<body id="body" onload="bodyLoaded()">
<div id="test" style="display:none; width:320px; height:240px">
 <p>Test Content</p>
</div>
<script type="text/javascript">
 function bodyLoaded(){
 document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";
 $('#link').attr('onclick', 'logText("Hello")');
 }
 function logText(message){
 console.log(message); 
 }
</script>

Any ideas why this would work? I am pulling my hair out here!

asked Nov 1, 2012 at 19:05
2
  • 1
    You know the difference between onload and dom-ready? Commented Nov 1, 2012 at 19:07
  • 1
    I don't see the problem - i've copied you 2nd script block into a test page and it works fine. It logs "Hello" into the console. Commented Nov 1, 2012 at 19:12

2 Answers 2

2

I don't understand why you're not just using jQuery for all of this.

$(function(){
 $('#body').prepend("<a id='link' href='#test' rel='lightbox'>Hello</a>");
 $('#link').click(function(){
 alert("Hello");
 });
});

If the .click() doesn't work, you could also try .live(). Both worked for me in jsfiddle(http://jsfiddle.net/LZxrL/ and http://jsfiddle.net/LZxrL/1/).

Also, why does everyone keep saying there is no element with id='body' when the body element itself has the id of 'body.' Clearly, he wants to add a link to the body.

EDIT: I just read your comment on another post about the issue being the lightbox, not the click event. That DOES change things. I'm not familiar enough with that plugin to comment authoritatively, but I would suspect that the plugin looks for rel="lightbox" when the page loads and any elements added afterward won't be caught. Most plugins have a manual method, something like:

$('#link').lightbox();
answered Nov 1, 2012 at 19:27
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the reminder. I ended up creating a hidden link on the page with rel="lightbox" so that EasyBox noticed it. Then changed the href of the link depending on my desired location and then triggered the link via jquery. It isn't pretty, but it works.
-1

I'm not seeing where you are loading the dynamic tags in your script. bodyLoaded() function is looking for anything with id='body' and in your second block of code I don't see any with that id tag.

answered Nov 1, 2012 at 19:10

1 Comment

See 1st line: <body id="body" onload="bodyLoaded()"> See also 7th line: document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.