Hi Peter,
This FAQ topic should answer your question:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_Ajax_request.3F
It describes the problem and provides a couple typical ways to
overcome it, in addition to pointing out a few jQuery plugins that do
the work for you.
If you still have problems after reading through it and trying one of
the many solutions, let us know.
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Aug 25, 2008, at 1:19 AM, peter wrote:
Currently, I use jquery's ajax function to create dymanic pages. But I
don;t think I understand to to correctly make jquery event listners
respond to the the DOM elements that I added via ajax response. I'll
give an abrevated example below
The function of the below script is to pop an alert box with the id of
the <a> that was clicked form the list
<script>
$(document).ready(function(){
$('.a').click(function(){
alert(this.id);
});
$('#bAdd').click(function(){
$.ajax({ ..... Abrevated .....})
});
});
</script>
Original HTML
<a href="#" id="bAdd">Add one more Link to click</a>
<ul id="list">
<li id="li_1"><a href="#" id="1" class="a">Click here (1)</a></
li>
<li id="li_2"><a href="#" id="2" class="a">Click here (2)</a></
li>
<li id="li_3"><a href="#" id="3" class="a">Click here (3)</a></
li>
</ul>
When the <a> link withe id bAdd is clicked it gets and additioanl <li>
line form the server and inserts it at the bottom of the list
NEW DOM HTML
<ul id="list">
<li id="li_1"><a href="#" id="1" class="a">Click here (1)</a></
li>
<li id="li_2"><a href="#" id="2" class="a">Click here (2)</a></
li>
<li id="li_3"><a href="#" id="3" class="a">Click here (3)</a></
li>
<li id="li_4"><a href="#" id="4" class="a">Click here (4)</a> </
li>
</ul>
The issue is that the jquery select "$('.a').click(....)" does to see
the newly inserted <li> line # 4... So clicked it will not yeild the
desired function, pop an alert pop. I've been getting around this but
including id specific event handling code in the injected ajax dom
element. But that mean I have to maintain to diffrent Jquery
functions; on the main page and in side the ajax responce function.
this there a way where I can my use of jquery class selections, inject
dom element via ajax and still maitn just one set of JS jquery
functions.
Thanks
