The DOM updates immediately when you add new elements. But "updating the
DOM" does not mean "copying event handlers from deleted DOM elements to
newly added DOM elements". That appears to be the problem here: You need to
assign the click handler again after replacing the DOM element, because the
click handler was attached to a DOM element that you are deleting.
> If the DOM have been modified, the DOM should be refresh (or
> the part of the modified DOM), it sound logical. How to force
> jQuery to do it ?
>
> let me illustrate :
>
> If I update the content of my page using a jQuery method, I
> can't access the new elements using jQuery.
> document.getElementById works, document.getElementsByName
> works, prototype' $() works, firebug list the new DOM
> elements, but jQuery considers thoses elements does not exists...
> I can understand that jQuery needs the document to be ready
> to trigger any event, but the event has already been declared
> and the DOM is up-to-date so, the DOM as jQuery listed it is
> supposed to be up to date too, isn't it ?
> Is there a reload DOM method I can call without having to
> redeclare each handler I need ?
>
> 2007/1/23, Joel Birch <[EMAIL PROTECTED]>:
> > What I said about the handler being attached more than once really
> > only applied to the example we were working with.
> Considering you are
> > emptying the content now the previous .test will not exist
> by the time
> > you load the new one. Also, Jörn's advise about using
> find() is good
> > practice and will ensure that the handler is attached only to the
> > .test elements it "finds" within the string you just appended.
> > You should be ok with something like:
> >
> > function testHandler() {
> > $(".test").change(function(){
> > alert(this.options[this.selectedIndex].text);
> > });
> > }
> >
> > $(document).ready(function(){
> > testHandler();
> > $(".trigger.fruits").click(function(){
> > $("#content").empty();
> > $("#content").append('<select name="fruits"
> > class="test"><option value="first">apple</option><option
> > value="second">orange</option><option
> > value="third">peach</option></select>')
> > .find(".test").each(testHandler);
> > return false;
> > });
> > $(".trigger.vegetables").click(function(){
> > $("#content").empty();
> > $("#content").append('<select
> name="vegetables"
> > class="test"><option value="first">tomato</option><option
> > value="second">potatoe</option><option
> > value="third">carrot</option></select>')
> > .find(".test").each(testHandler);
> > return false;
> > });
> > });
> >
> > I'm pretty sure that code can be optimised better than this though.
> > Also, about the parsing of the HTML - jQuery does do this
> for you so
> > don't worry about that.
> >
> > Good luck
> > Joel.
> >
> >
> > On 24/01/2007, at 12:34 AM, Laurent Goussard wrote:
> >
> > > If I well understood Joel and Jörn, I am suppose to
> declare my event
> > > handler each time I switch the #content's content, but this will
> > > result to increment the alert() number each time the event is
> > > declared... What a pity...
> > >
> > > I cannot really understand why jQuery does not add the
> content newly
> > > loaded to the existing DOM. I mean jQuery should parse and update
> > > the DOM foreach .html method used (in append*, load, etc...),
> > > shouldn't it ?
> > >
> > > I can't imagine I'm the only one who wanted to add jQuery
> events on
> > > html content loaded with jQuery. Am I ?
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
