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=\"#\">An
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.
