Question

Say I have a some links that uses the live method to load dynamic file.html data into an existing div element, and that file.html has other links that gets loaded. I want to be able to click those links to load more newfile.html into another div element without page reload.

example:

index.html

<ul>
<li><a id="resume">My Resume</a></li>
<li><a id="bio">Biography</a></li>
</ul>
<div id="dynamic">
... this div will load either resume.html or bio.html loaded depending on what link the user clicks on ...
</div>

resume.html

<p>
.... blah blah .. <a id="vid1">Volunteer work day</a> ....
</p>
<div id="video>
<object> ... some php ... </object>
</div>

JQuery

$(document).ready(function(){
    $('a[rel!="external"]').click(function(){e.preventDefault();});
    $("#resume").live('click',function(){
       var data = $.get('resume.html');
       data.success(function(data){$("#dynamic").html(data);});
    });
    // should this be in the $("#resume").click function if this new link
    // is loaded from clicking  the resume link?
    $("#myVid").click(function(){console.log("Debug Output");});
});

Okay, so here if I leave the code as that, the new link (Volunteer work day) won’t do anything when clicked. If I put it in the function that loaded the resume.html content into the dynamic div, I have to click twice for the action to happen. How can I fix this?

Answer 1

use live or delegate

$("#myVid").live('click',function(){console.log("Debug Output");});

or bind the click handler in the resume success callback like

$("#resume").live('click',function(){
   var data = $.get('resume.html');
   data.success(function(data){$("#dynamic").html(data);
  $("#myVid").bind("click");
  });
});