Event Handling In dynamically generated page

Question

So i have a div with class called 'taglines' which is contained in a div with class called 'container'. When 'taglines' is clicked, it navigates to another page. The problem is the events on this new page are not responding after navigation. The following is the code that i am using to navigate:

 $(document).ready(function(){ $('.container').on('click', '.tagLines', function(){ window.location = "manageMarks.php"; }); } 

The following is the code with the event that is refusing to work after navigation:

 $(document).ready(function(){ $('.container').on('click', '.loadSub', function(){ alert('Clicked'); }); }); 

However, If i use ajax to load the new view i want, the events do eventually work. The following is the ajax I code i am using:

 $(document).ready(function(){ $('.container').on('mouseover', '.tagLines', function(){ $.ajax({ type: 'GET', url: 'manageMarks.php', data: { videoCode: $(this).attr('data-code') }, success: function(data){ //alert(data); $('.container').html(data); } }).error(function(){ alert('An Error Has Occured'); }); }); 

How can I get it to work without using ajax?

Answer 1

Are you doing a full page reload? If so your events would need to be wired up again. If not they should get wired up to dynamically loaded content.