The issue is that once you bind a click handler on existing elements,
it will not take effect on elements added in the future. You can re-
bind it again once you added the new content, or you can use jQuery's
live() function in place of click() to have elements added in the
future to also have the event attached. This is good since once you
call it on page load, you don't have to call it again.
http://docs.jquery.com/Events/live
Another possible issue with your code is your use of element IDs. You
can only have one unique ID on one HTML page at any time. If you keep
clicking on "more", you're going to have many 'vieworderdata' IDs, and
that's not valid. To offset this issue, use the "class" attribute
instead, as you can have more than one element with the same class
attribute on a page. Then change your click binding to use
the .myClass instead of #myID.
Another minor issue is that your should use double-quotes for your
element attributes in HTML.
Instead of:
<div id='dlorder'>
use:
<div id="dlorder">
On Mar 24, 11:08 am, iskills <i...@infiniteskills.com> wrote:
> OK - let me please preface this by the fact that I am now 12 hours
> into jQuery, with a pretty basic Javascript understanding, and years
> of PHP work. I could not find the answer to my questions, mostly
> because I don't exactly know how to frame them!
>
> I am creating a search with expandable results. The search part I
> have down just fine, I have a form submit button that executes a .load
> function that drops the search results to a div. So far so good -
> this works wonders. Now, what I am trying to accomplish and cannot,
> is for a linked item in that returned data, to then show/hide
> additional data passed through to it in a hidden div.
>
> So my javascript is this:
> $(document).ready(function(){
> $("#sboid").click(function(){
>
> $("#search_results").load("ajax.html",{order_id:$('#orderid').val
> (),action:"digital_search"});
> });
> $("#vieworderdata").click(function() {
> $("#order_logs").show("slow");
> });
>
> });
>
> The return from the ajax.html page would be something like:
> <div id='dlorder'>
> <span id='orderid'><a href='#' id='vieworderdata'>1234</a></span>
> <span id='orderdate'>2009-03-24</span>
> <span id='name'>4456 - widget</span>
> <div style='display: none' id='order_logs'>
> <span id='access_key'>Access Key: absdcef</span>
> <div id='log'>
> <span id='log_date'>2009-03-24 10:00:02</span>
> <span id='log_ip'>0.0.0.0</span>
> <span id='disk_no'>Disk Number: 1</span>
> </div>
> </div>
> </div>
>
> That gets returned into the <div id='search_results'></div> in the
> starting HTML page.
>
> So, when I click on the a href in the returned data, in theory, that
> hidden block will be displayed. Not happening. I am not sure if I am
> not accessing it properly in the javascript above, or if it is not
> working because it was not a part of the original page DOM, and cannot
> be accessed?
>
> Further to this, once THAT is working, there is an issue that there
> may be MANY results returned, and how to reference the "a href" that
> was clicked, to the hidden div to be displayed. I can easily return
> different div names, appending a running count to them
> (vieworderdata1, vieworderdata2, vieworderdata3, etc), but how to
> create the javascript code to say "the one I clicked on here is the
> div hidden just below it..."
>
> TIA for your help, and please go easy on a noob ;)
