Thanks for your answers !
That's exactly what I was afraid to understand.
Let say I want to add events to form elements loaded using ajax...
I will have to parse the form html string to get the dom, build the
html output from the parsed dom, inject it in the corresponding
element and then I will be able to handle events from the loaded form
? Hummm that's not a very light process...
What if the form is different, depending on the client status (logged
or not, preferences values, etc...) ?
The other (and mainstream) solution seems to wait for the element to
be loaded and delcare the event once it is ready. It's sounds very
logical... but :
Let's consider a page like the following code :
- - - -
$(document).ready(function(){
$(".test").change(function(){
alert(this.options[this.selectedIndex].text);
});
$(".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>');
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>');
return false;
});
});
(...)
<a href="http://www.site.com/"; class="trigger fruits">- change for
fruits</a>
<a href="http://www.site.com/"; class="trigger vegetables">- change
for vegetables</a>
<div id="content">
<select name="default" class="test">
<option value="first">one</option>
<option value="second">two</option>
<option value="third">three</option>
</select>
</div>
- - - -
This example is simplier than my real code is : In fact I don't load a
simple string but get a full form source using ajax.load() method.
Those forms haven't got the same dom structure or fields (so I can't
parse them in an easy way), but they use some common event methods
such as changing the state of a existing page element depending on the
event...
Nothing exceptional regarding the web 2.0 forms we can meet on the web...
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 ?
=)
Thank you
2007/1/23, Joel Birch <[EMAIL PROTECTED]>:
>
> On 23/01/2007, at 9:56 PM, Roberto Ortelli wrote:
>
> > <script type="text/javascript">
> > $(document).ready(function(){
> >
> >
> > $("#trigger").click(function(){
> > $("#content").append('<a href=""
> > class="test">click does not work</a>');
> >
> > $(".test").click(function(){
> > alert("yeepee");
> > return false;
> > });
> >
> > return false;
> > });
> > });
> > </script>
>
> This works. Just bare in mind that if you click your #trigger link
> more than once it means you are attaching the click behaviour of
> the .test element each time. Therefore if you click #trigger four
> times then press the first .test element that appeared you would get
> four alert messages.
>
> Good luck.
> Joel.
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
