Links not working on dynamic page

[Digger]

I have a page loaded into a div

<script>
$(document).ready(function(){
   $( "#nav-home" ).load("'.DIR.'admin/client/list" );
});
</script>

`That work fine

Within admin/client/list is the following

<div class="dropdown btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
  <div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenuButton" style="right:auto; left: auto;">
    <a class="dropdown-item" href="#reject"><i class="fas fa-angle-right mr-2"></i> Reject / Cancel</a>
    <a class="dropdown-item" href="#approve"><i class="fas fa-angle-right mr-2"></i> Approve</a>
    <a class="dropdown-item" href="#active"><i class="fas fa-angle-right mr-2"></i> Activate</a>
   <a class="dropdown-item" href="#delete"><i class="fas fa-angle-right mr-2"></i> Delete</a>
  </div>
</div>

I cannot get the links to trigger with Jquery

I have tried 

<script>
  $('.dropdown-item').click(function 
  $('.dropdown-item').on('click', function 
  $('.dropdown-item').on('click','a', function 
  $('.dropdown-item').live('click', function 
  $('.dropdown-item').live('click', 'a' function 
  $('.dropdown-item').bind('click', function 
  $('.dropdown-item').bind('click', 'a' function

Nothing seems to be working so any help would be much appreciated

[Barand]

Probably because of the sequence of events. I suspect it is ...

1. page loads
2. <script> is run
3. client/list is loaded

Try moving the code from <script> to the ready() function after the load so that the elements are loaded before you create their event handlers..

[Digger]

The code entered isn't the exact code it was just a quick example everything is done proper

 

<script>
  $(document).ready(function){
    $( "#nav-home").load("'.DIR.'admin/client/list" );
    
    /*
    $('.dropdown-item').click(function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
    /*
    $('.dropdown-item').on('click', function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
    /*
    $('.dropdown').on('click', 'a', function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
    /*
    $('.dropdown-item').live('click', function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
    /*
    $('.dropdown-item').live('click', 'a', function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
    /*
    $('.dropdown-item').bind('click', function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
    /*
    $('.dropdown-item').bind('click', 'a', function(){
      alert('clicked');
    }); 
    Doesnt work
    */
    
  };
</script>

None of the above are working

[Barand]

Have you tried my suggestion?

[Digger]

Yes i tried it before I posted the question

[Barand]

8 minutes ago, Digger said:

Doesnt work

Code that is commented out seldom does.

[Digger]

				$(document).ready(function(){
					$( "#nav-home").load("'.DIR.'admin/client/list", function() { 
					
						$(".dropdown-item").on("click", function(){
							alert("clicked");
						}); 
					
					});
				});

That worked