Apply Jquery on dynamically shown/hidden elements

Question

I have a page which makes the menu to be drop down for responsive behaviour. So it is obvious that the select tag comes in picture only when it is smaller screen. I want to apply jquery to that select box and other two buttons added dynamically at that time.

I refer this question: Event binding on dynamically created elements?

But it didn't help me solving out the problem.Can anyone please explain where I am going wrong?

I used this jquery to make it drop menu in my page.-just for reference if someone needs.

Here is what I tried:

<div id="nav" role="navigation"> 
            <a href="#nav" title="Show navigation" id="shownav">
                choose one
                <img src="images/dropmenu-arrow.png" alt="" class="droparrow">
            </a> 
            <a href="#" title="Hide navigation" id="hidenav">
                choose one
                <img src="images/dropmenu-arrow.png" alt="" class="droparrow">
            </a>
            <ul class="clearfix" id="kat-drop">
                <li><a href="#">list item 1</a></li>
                <li><a href="#">list item 2</a></li>
                <li><a href="#">list item 3</a></li>    
            </ul>
      </div>
<script src="js/doubletaptogo.min.js"></script>       
        <script>

            $( function()
            {
                $( '#nav li:has(ul)' ).doubleTapToGo();

            });// upto this-it runs fine giving me dropmenu for desired screen

            $(document).on("click",$("#shownav"), function(){
                //alert("clicked"); // this didn't work neither the rest of the code from here
                 if($("#kat-drop").css("display")=="block"){

                      $("#kat-drop").slideUp();
                 }
                 else{

                      $("#kat-drop").slideDown();
                 }
            } );


        </script>   

Edit - 1

Ok,i removed it as asked.it's now:

$(document).on("click","#shownav", function(){
        event.preventDefault();   // i want to prevent reloading of page too which doesn't work for now.                

} );

$(document).on("click","#shownav", function(){
         alert("clicked"); // Still I am not getting this alert
         if($("#kat-drop").css("display")=="block"){

              $("#kat-drop").slideUp();
         }
         else{
              $("#kat-drop").slideDown();
         }

} );

Edit - 2

Neither it prevent reloading of page nor gives me alert.

 $(document).on("click","#shownav", function(event){
                event.preventDefault();   // i want to prevent reloading of page too which doesn't work for now.                

        } );
 $(document).on("click","#shownav", function(event){
                alert("clicked");// not working yet         

        } );

Answer 1

Just change your code from:

$(document).on("click",$("#shownav"), function(){

to this:

$(document).on("click", "#shownav", function(){

As, the proper syntax while using event delegation is like:

$( selector ).on( events, selector, handler)

---

UPDATE

But still it is refreshing the whole page which is the only thing i want to prevent along with hide/show the menu.

You just need to prevent the default click action of the anchor using .preventDefault() like:

 $(document).on("click", "#shownav", function(e){
      e.preventDefault();
      // your code here..
 });

Fiddle Demo

---

In your edited code:

$(document).on("click", "#shownav", function (event) {
    event.preventDefault(); 
});

$(document).on("click", "#shownav", function (event) {
    alert("clicked"); // not working yet         
});

you have attached two event handlers to the same element. Just assign one event handler like this:

$(document).on("click", "#shownav", function (e) {
    e.preventDefault(); 
    alert("clicked");
});

and see the result like the fiddle demo I have provided.

Answer 2

The second parameter should be a string selector, you are passing a jQuery object

$(document).on("click","#shownav", function(){});

Answer 3

change this:

$(document).on("click",$("#shownav"), function(){

to this:

$(document).on("click","#shownav", function(){

update:

$(document).on("click","#shownav", function(event){ //<--pass the event here too
    event.preventDefault();// <-----------stop the default behavior of anchor 
 }); 

Okay another one you can try:

$(function(){
     $( '#nav li:has(ul)' ).doubleTapToGo();
     $(document).on("click","#shownav", function(event){ //<--pass the event here too
        event.preventDefault();// <-----------stop the default behavior of anchor 
     });
});// upto this-it runs fine giving me dropmenu for desired screen