How to bind Events on Ajax loaded Content

Question

I have a link  myLink  that should insert AJAX-loaded content into a div  appendedContainer  of my HTML page  The problem is that the click event I have bound with jQuery is not being executed on the newly loaded content which is inserted into the appendedContainer  The click event is bound on DOM elements that are not loaded with my AJAX function   What do I have to change  such that the event will be bound    My HTML    lt a class  LoadFromAjax  href  someurl  gt Load Ajax lt  a gt   lt div class  appendedContainer  gt  lt  div gt    My JavaScript       LoadFromAjax   on  click   function event        event preventDefault        var url     this  attr  href            appendedContainer       appendedContainer           ajax       url  url      type    get       complete   function  qXHR  textStatus                        if  textStatus      success                 var data   qXHR responseText             appendedContainer hide                appendedContainer append data               appendedContainer fadeIn                                        mylink   on  click   function event    alert  new link clicked          The content to be loaded    lt div gt some content lt  div gt   lt a class  mylink  href  otherurl  gt Link lt  a gt

User · Answer

if your question is  how to bind events on ajax loaded content  you can do like this       img lazy   lazyload       effect    fadeIn       event   scrollstop       skip invisible   true    removeClass  lazy        lazy load to DOMNodeInserted event   document  bind  DOMNodeInserted   function e           img lazy   lazyload           effect    fadeIn           event   scrollstop           skip invisible   true        removeClass  lazy          so you don t need to place your configuration to every you ajax code

User · Answer

For those who are still looking for a solution   the best way of doing it is to bind the event on the document itself and not to bind with the event  on ready  For e g       function ajaxform reload       document  on  submit     ajax forms   function  e        e preventDefault        var url     this  attr  action          ajax           type   post           url  url          data    this  serialize            success  function  data                   DO WHAT YOU WANT WITH THE RESPONSE

User · Answer

If your ajax response are containing html form inputs for instance  than this would be great     document  on  change    input type radio  name fieldLoadedFromAjax    function event     if  this value     Yes          do something here   else if  this value     No          do something else here    else      console log  The new input field from an ajax response has this value     this value

User · Answer

Use event delegation for dynamically created elements     document  on  click     mylink   function event         alert  new link clicked           This does actually work  here s an example where I appended an anchor with the class  mylink instead of data -  http   jsfiddle net EFjzG

User · Answer

Important step for Event binding on Ajax loading content    01  First of all unbind or off the event on selector    quot  SELECTOR quot   off     02  Add event listener on document level   document  on  quot EVENT quot     SELECTOR   function event         console log  quot Selector event occurred quot

User · Answer

use jQuery live   instead   Documentation here  e g      mylink   live  click   function event    alert  new link clicked

User · Answer

As of jQuery 1 7  the  live   method is deprecated  Use  on   to attach event handlers   Example -      document   on  events  selector  data  handler

User · Answer

For ASP NET try this    lt script type  text javascript  gt      Sys Application add load function              lt  script gt    This appears to work on page load and on update panel load  Please find the full discussion here

User · Answer

If the content is appended after  on   is called  you ll need to create a delegated event on a parent element of the loaded content  This is because event handlers are bound when  on   is called  i e  usually on page load   If the element doesn t exist when  on   is called  the event will not be bound to it   Because events propagate up through the DOM  we can solve this by creating a delegated event on a parent element   parent-element in the example below  that we know exists when the page loads  Here s how       parent-element   on  click     mylink   function      alert   new link clicked          Some more reading on the subject    https   learn jquery com events event-delegation  http   jqfundamentals com chapter events

[javascript] How to bind Events on Ajax loaded Content?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to ajax

Examples related to jquery-events