I want to load different images to a div, from links

Hiya, very very new to jQuery and surviving on your wonderful tutorials.

I'm working on my portfolio website, and have a list of projects that uses jQuery's load function to load descriptions of each proj开发者_如何学编程ect into a separate div when clicked. Within each description is a set of numeric links, say 1-5, which I want to display relevant images into another separate div when clicked. My problem so far is that I can't reuse the load function because it overwrites it's intiial use, and doesn't seem to want to be echo'd into the php file that holds all my project descriptions.

Is there a way round this?

I'm only guessing because I haven't seen your code, but when you dynamically load content using ajax, any javascript inside the new content will not get executed.

The best way around this would be to use jQuery's live function to target the links inside the newly loaded content which replaces the image src when clicked - there is no need to use load to grab an image. Here is some example code:

Main page javascript (I didn't include the load function)

$('.project').live('click',function(){
 newImg = $(this).attr('data-img');
 $('#content img.projectImg').attr('src', newImg);
})

HTML in loaded content

<div id="content">

<!-- this content was dynamically loaded -->
<img class="projectImg" style="float:right"/>
<ul>
 <li class="project" data-img="project1.jpg">Project 1</li>
 <li class="project" data-img="project2.jpg">Project 2</li>
</ul>

</div>

You can try to use pure JavaScript for doing that, no need of jquery

For example, dynamically changing the image or text:

document.getElementById('Image_tag_ID').src = 'http:\\ bla-bla';
or
document.getElementById('Div_tag_ID').innerHTML = '<h1>Hello</h1>';