.Click() function not working Jquery

Question

I am working on a module which contains two pages one being the product.php and the other being the filterproducts.php

Product.php contains a Div Element which gets loaded by the .load() present inside the product.php

<div id="limitpage">
</div>

The .load() function makes an ajax call and get the output from the filterproducts.php

Structure of product.php looks like this

 <button id="nex" >clickme</button>
     <div id="limitpage">
        </div>
    <script>
          //Both of them are in document ready function
          $('#nexus').on('click',function () {

                alert("here");

            });
        $('#nex').click(function(){
           $('#limitpage').load("filterproducts.php");
        })

    </script>

filterproducts.php contains a button

<button id="nexus">Next Page</button>

But ,when the page gets loaded on('click',function()) doesn't work.Why is this exactly happening? What is the workaround to do the same,if this one is not possible.

You need event delegation. Something like `$('#limitpage').on('click', '#nexus', function () {...});` — putvande, Mar 11 '16 at 19:55
If you're loading `filterproducts.php` *asynchronously*, the binding wont find a `nexus` element because it hans't been added to the DOM yet. — Adam Konieska, Mar 11 '16 at 19:56
Can you tell me how to do that? I mean i am new to jquery php. — Tanvi Malhotra, Mar 11 '16 at 19:56
Go here: http://api.jquery.com/on/ and read about "Delegated Events" as @putvande suggests. — n8wrl, Mar 11 '16 at 19:58
You don't need ready if the script tag is at the end of the body, did you try debugging it using console.log(' ... '), try switching to on('click',... — Noctisdark, Mar 11 '16 at 19:58
.load() has an optional completion handler - you could bind your on click handler in there, since nexus would exist by then — Tibrogargan, Mar 11 '16 at 20:10

score 5 · Accepted Answer · answered Mar 11 '16 at 19:57

When the document is ready, the output from filterproducs.php is not yet present in the page, so $('#nexus') will return an empty set, and so it is not bound.

The solution is to bind something that is present in the page, and filter at the moment of the click. A typical example:

$(document).on('click', '#nexus', function() { 
  alert('nexus clicked!'); 
})

score 0 · Answer 2 · answered Mar 11 '16 at 19:58

0

You need an event delegation. Just consider this as a replacement of .live() // deprecated now. This will bind the click function to your button

$(document).on('click', '#nexus', function() { 
  alert('nexus clicked!'); 
})

answered Mar 11 '16 at 19:58

Tushar

11,306
1
21
41

.Click() function not working Jquery

2 Answers2