When I want to wire up a bunch of events, I can use document.ready() to cause script to be executed once the DOM has been constructed.

I'm not sure how to handle a situation I have right now, though.

 

I have a DIV that will contain a form.  When I need to I'm going to call .load() to load the appropriate work and then .dialog() to make it visible to the user.

 

Within that form that is being loaded, there are 2 select elements that are dependent on each other....when the first changes, the second needs to be updated.

 

If there were just form elements in a normal document I wouldn't have a problem.  I'm not sure what the best way to handle it needs to be for this situation.

 

I'm thinking that the the HTML that is being loaded into the div should look like:

 

<form>

<select id="s1">...</select>

<select id="s2">...</select>

 

</form>

<script>

 $("#s1").change(function(){...}));

</script>

 

that way the script would execute and attach the event to s1 when the element is loaded.

 

Am I correct in this assumption?

Will there be any issues if load is called again on the same element to load the content again, and another element, with the same id, but is still unique within the document exists, since it would replace the preciously loases content, has the event wired to it?

 

I really looking for a little guidance here.

Thank you in advance,

David Jessee