problem is events won't trigger on new element introduced to DOM after
document ready has fired unless you use live() or livequery(),
these allow to bind to elements before they enter DOM
read up on it, will be an easy fix
Eric-Sebastien Lachance wrote:
Sorry if the subject is somewhat hard to understand, but if I had the
proper terminology, I probably would have found an answer through
google.
So here's the problem. Within my HTML I have the following div:
<div id="InvoiceList">
<p class="trigger"><a href="">Test Entry</a></p>
<div class="details">Test Details</div>
</div>
And in the script, the following jquery function:
$(".details").hide();
$("p.trigger").click(function(){
$(this).next(".details").slideToggle("slow,");
});
This works fine, the div is hidden initially and I click to show it.
Now, the problem is that if I append() a new <p> and <div> to the
InvoiceList, the div is visible and clicking the link does nothing.
Here is how I append:
$("#InvoiceList").append("<p class=\"trigger\"><a href=""
Invoice</a></p><div class=\"details\">Invoice Name: " + varInvoiceName
+ " Supplier: " + varSupplierID + "<br>Comments: " + varComments + "</
div>");
Since the append code is before the trigger functions, I would expect
jquery to see the appended content of the div and apply the .hide()
and .click() functions properly... But it doesn't!
This seems to be a general problem with append(), as I've seen the
same problem with accordion() (to which the answer was to reinitialize
it, but I don't see how this would be possible with a simple div).
What's missing that will make this work, and why is it not documented
anywhere that I can see (it's not in the jquery append()
documentation, in any case).
Thanks in advance,
Eric.
|
