jQuery not work with Ajax returned code

Question

I have file with that code

<script language="JavaScript">


function load() { var xmlObj;               
                      if(window.XMLHttpRequest){ 
... ajax function which return result...
 xmlObj.send ('...');}


$(document).ready(function() {
                       $("#desc").click(function() {    
                           $("#contcont").hide();       
                           $("#desccont").fadeIn();
                        });

                       $("#cont").click(function() {    
                           $("#desccont").hide();     
                           $("#contcont").fadeIn();         
                        });
                })


            </script>

And have ajax file show.php/ which returned this code

                              <a id="desc">Desc</a>
                              <a id="cont">Cont</a>


                               <div id="desccont">
                                  desccont
                               </div>

                               <div id="contcont">
                                  contccont
                               </div>

And jQuery not works when i click ids desc and cont. But it works normal when html code into first file

score 2 · Answer 1 · edited May 23 '17 at 12:24

2

    $(document).ready(function() {
         $('body').on('click', "#desc" , function() {    
              $("#contcont").hide();       
              $("#desccont").fadeIn();
         });

         $('body').on('click', "#cont" , function() {    
             $("#desccont").hide();     
             $("#contcont").fadeIn();         
         });
  })

take a look at Event binding on dynamically created elements?

Note: this code should work if not .. be sure to include jquery

edited May 23 '17 at 12:24

Community

1
1

answered Dec 01 '15 at 22:34

Mohamed-Yousef

23,946
3
19
28

not working((( i'm sure that i have included it. Jquery working if i put this code in first file – Kirill Che Dec 01 '15 at 22:42
Thank you for the answer – Kirill Che Dec 01 '15 at 22:58

score 1 · Accepted Answer · edited May 23 '17 at 10:27

I am guessing that you are loading dynamic content with your ajax call and you are not waiting for the dynamic content to be actually done loading before you try to hook up event handlers on the content. $(document).ready() does not wait for dynamically fetched content to load, only for the original page HTML to load.

Thus, you try to install your event handlers with code like $("#desc").click(...) before #desc is actually in the document. Thus, the code doesn't not find the elements and no click handler is attached.

You can fix this two separate ways:

Don't try to install the event handlers UNTIL the ajax code has actually finished inserting the dynamic content. You would put the click handlers inside the ajax completion function to accomplish this.
Use delegated event handling which will work with content loaded after-the-fact.

The basic concept behind delegated event handling is that you attach the event handler to a static parent object that already exists and is in the document. Ideally you select a parent that is as close as possible to where the dynamic element will be (this is more efficient). Then, the event handler use event "bubbling" to see the events that occur on the child events and, if you use jQuery's .on() properly, you can handle the events that occur on the children. You don't show your the relevant portion of the HTML so we can't recommend the most efficient way to do this.

You can read about how to best use delegated event handling in jQuery in these other answers:

Does jQuery.on() work for elements that are added after the event handler is created?

jquery click event doesn't work

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Should all jquery events be bound to $(document)?

JQuery Event Handlers - What's the "Best" method

Other possible issues:

Your id values are not unique in your document. There must be no more than one element with a given id value.
You have a script error somewhere in your code that prevents the desired script from running. You should be able to see this reported in the debug log.

Thanks for exellent answer! – Kirill Che Dec 01 '15 at 22:57 — Kirill Che, Dec 01 '15 at 22:57

jQuery not work with Ajax returned code

2 Answers2