1078

jQuery content loaded via .load() but href link not working

Question:

I have a problem with HTML content loaded with .load(). I have an 'accordion' menu that is working great, and on clicking an item in the menu there's a small jquery code used to load the required content into the assigned [div]

The problem I'm having is that on some of the pages that are loaded there are some href="" links. Clicking these links does not cause the 'next' page to load into the div, but instead actually forces a reload of the main page (as though you'd just pressed the RELOAD button on the browser)...

<strong>menu.js (snipped)</strong>

$(document).ready(function() { $(".Page1").click(function () { $("#pageloadarea").load('Page1.php'); $('head').append( '<link rel="stylesheet" href="includes/style.css" type="text/css" />' ); return false; }); $(".Page2").click(function () { $("#pageloadarea").load('Page2.php'); $('head').append( '<link rel="stylesheet" href="includes/style.css" type="text/css" />' ); return false; }); });

<strong>Menu Section (snipped) from index.php page</strong>

<ul> <li class="button"><a href="" class="Page1">Page1</a></li> <li class="dropdown"> <ul> <li><a href="" class="Page2">Page2</a></li> <li><a href="" class="Page3">Page3</a></li> <li><a href="" class="Page4">Page4</a></li> </ul> </li> </ul>

In the <em>index.php</em> page the menu is located inside [div id="menu"] and the content is injected/loaded into [div id="pageloadarea"]

Clicking on <em>Page1</em> in the menu successfully loads <em>Page1.php</em> into the [div], as does clicking <em>Page2</em>, <em>Page3</em> and <em>Page4</em> (from the menu)...

Once <em>Page1.php</em> has been loaded into the [div] there is a standard link

<a href="" class="Page2">Page 2</a>

This is the link that does not work. I have numerous sub-pages that have [a href] links within them and none of them work once the main content has been through the .load() process...

Any assistance would be appreciated!

Answer1:

$(document).ready(function() { $(document).on("click",".Page1", function () { $("#pageloadarea").load('Page1.php'); $('head').append( '<link rel="stylesheet" href="includes/style.css" type="text/css" />' ); return false; }); $(document).on("click",".Page2", function () { $("#pageloadarea").load('Page2.php'); $('head').append( '<link rel="stylesheet" href="includes/style.css" type="text/css" />' ); return false; }); });

Use this as it will bind the event to new loaded DOM elements also.

Answer2:

You need to attach all the event handlers to he links once your now page loads or use delegation.

Delegation Example

HTML link:

<!-- add a class to filter ajax links on "ajaxify", also use the HREF attribute For the page to be loaded - not sure whay you arent doing that now... --> <a href="Page2.php" class="Page2 ajaxify">Page2</a>

JS

// use delegation to attatch the event handlers $(function(){ $(document).on('click', 'a.ajaxify', function (e) { e.preventDefault(); // prevent normal link navigation var $this = $(this), url = $this.attr('href'); $("#pageloadarea").load(url); $('head').append('<link rel="stylesheet" href="includes/style.css" type="text/css" />'); return false; }); });

By using delegation the handler is attached to the document element and when a click event is bubbled up it is filtered... if the trigger was an a.ajaxify then the handler will be invoked. This allows you to handle instances of a.ajaxify that were not in the DOM when you first attached the handler.

Recommend

  • Connection refused by Spring boot app running in different docker container
  • issue using deepcopy function for cython classes
  • Sqlite Database deleted when I clear data from Application
  • How to handle a nullable foreign key field in Entity Framework?
  • Error: packet sequence number wrong after upgrading RDS instance
  • NHibernate - Paging with ICriteria and optional ICriteria calls
  • Cannot get Django 1.7 Migrations to detect proper changes to my DB.
  • Application backgrounding in Xamarin.Mac
  • Can't access web service when connected to the network :: HTTP 407
  • ASP.NET MVC 3 ListBox validation
  • Faces Servlet not parsing .xhtml pages in jsf 2. running on tomcat 7
  • Why clearfsimport command adds file to source control with a size zero?
  • How to adapt DirectX-style world/view/projection matrices to OpenGL?
  • jqGrid Filter Toolbar and Date and Select filters
  • Questions related to Garbage Collector and finalize() method
  • Do iTunesConnect external testers get updates for *every* uploaded ipa file after Beta Approval?
  • can you use embedded ruby in custom javascript files in rails?
  • Auto send email based on the time and email address in database
  • How to get “crispEdges” for SVG text?
  • Authorize Attribute Authentication with Postman in Web Api
  • Exclude Classes from Being Included in Shaded Jar
  • Swift manually rotate view controller
  • 'Edit' function for forum posts and such
  • Generate and export point cloud from Project Tango
  • how to specify different css for ie
  • Ember.js + JQuery-UI Tooltip - Tooltip does not reflect the model / controller changes
  • How can i move Clearcase dyamic/snapshot views to another host (Linux)
  • How to write seo friendly url's using htaccess?
  • VS2010 RDLC C#. How can I set a LocalReport object to a ReportViewer?
  • JQuery: Infinite input select
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • How to use Streams api peek() function and make it work?
  • Using redis as an LRU cache for postgres
  • Angular 4: Responsive Grid List
  • WPF custom control and direct content support
  • media foundation H264 decoder not working properly
  • Create/delete users from text file using Bash script
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?