Ajax not working after displaying data on page
I have a page where I display a friends list from my website members. But on the same page I have a search box where they can search for new friends. Here is my problem. After I clear the div and display the search results one of the Ajax function does not work.
Here is the function that does not work after I display the Ajax result.
$("a[rel=adduser]").click(function(){
var fullurl = this.href;
//REMOVE THE VALUE FROM THE URL
fullurl = fullurl.replace(/^.*#/, '');
alert(fullurl);
});
Here is the section of the code that call that function. (this is a sections of the code... the code gets data from the database and loops to generate the HTML code and display it on scrren)
for(var i=0; i<data.ROWCOUNT; i++) {
var html = "<div class='grid_1' style='margin:7px;'><div class='stimglg' align='center'>";
html = html + "<img src='http://www.cysticfibrosis.com/profile/images/profileimages/" + data.DATA.PROFILEIMAGE[i];
html = html + "' alt='" + data.DATA.VCHNICKNAME[i] + "' width='150' height='150' border='0' /><br>";
html = html + "</div><div align='left' style='padding-left:10px;'>&开发者_如何学运维lt;h3><a href='http://www.cysticfibrosis.com/profile/index.cfm/" + data.DATA.VCHNICKNAME[i] +"'>" + data.DATA.VCHNICKNAME[i] + "</a></h3>";
html = html + "<h4><a href='/#" + data.DATA.IUSERID[i] + "' rel='adduser' onclick='return false;'>Add as a Friend</a></h4></div></div>";
$('#nearResult').append(html);
}
It is not working because the click event is only attached to the first items on the page not to items that are generated afterward via AJAX. You need to look at the Live()
function. The live function attaches the event to items that are generated dynamically also after the original page load.
Check out this documentation
精彩评论