Jquery Event Won't Fire After Ajax Call

jQuery click function doesn't work after ajax call?

The problem is that .click only works for elements already on the page.
You have to use something like on if you are wiring up future elements

$("#LangTable").on("click",".deletelanguage", function(){
  alert("success");
});

jquery click event not firing after ajax event

Probably you need event delegation

$(document).on('click', '.edit', function(e) {
  e.preventDefault();
  // code to read selected table row cell data (values).
  var currentRow = $(this).closest("tr");
  id = currentRow.find("td:eq(0)").html();
  .
  .
}

Resource

• Event delegation .on()

Jquery Event won't fire after ajax call

When you remove an element and then replace it (via javascript), it loses any event bindings that were added to it on page load.

(This also applies to content added to the page after page load - i.e. ajax loaded content)

There are several possible solutions for this.

1) Encapsulate your "binding" code and call it both on page load and immediately after the element in question gets added back to the page. For example:

$(document).ready(function(){
    // bind event handlers when the page loads.
    bindButtonClick();
});

function bindButtonClick(){
    $('.myClickableElement').click(function(){
        ... event handler code ...
    });
}

function updateContent(){
    $.ajax({
        url : '/ajax-endpoint.php',
        data : {'onMyWay' : 'toServer'},
        dataType : 'html',
        type : 'post',
        success : function(responseHtml){
            // .myClickableElement is replaced with new (unbound) html element(s)
            $('#container').html(responseHtml);

            // re-bind event handlers to '.myClickableElement'
            bindButtonClick();  
        }
    });
}

2) The more elegant way to handle this: use jQuery's .on() method. With it, you are able to bind event handlers to elements other than the event target - i.e. an element that never gets removed from the page.

$(document).ready(function(){
    $('body').on('click','.myClickableElement',function(){
        ... event handler code ....
    });
});

Some further explanation:

The .on() method uses event delegation to tell a parent element to retain your event handler code (3rd argument), and fire it when the event target (2nd argument) has a certain type of event (1st argument) performed on it.

If you are using a version of jQuery prior to 1.7 use the now deprecated delegate method which essentially does the same thing.

Also, it is worth noting that because of the way events "bubble up" through the dom tree, the event target (2nd argument of .on() method) must be a descendant of the delegating element (jQuery object's selector). For example, the following would NOT work

<div id="container-1">
    <div>
        <div id="another-div">
            Some Stuff
        </div>
    </div>
</div>

<div id="container-2">
    <a id="click-me">Event Target!!!</a>
</div>

<script type="text/javascript">
    $('#container-1').on('click','#click-me',function(){
        ... event handler code ....
        // This will never execute, should've used '#container-2', or 'body', or 'document' instead of '#container-1'
    });
</script>

The body or document elements are usually safe choices since typically every element on the page is a descendant.

jQuery event won't work after ajax call

Apparently the solution is to set an off before listening to the event.
So, it would just be

 $btnShowHide.each(function() {
        $(this).off('click').on('click', function() {
            var i = $btnShowHide.index(this);
            $contentShowHide.eq(i).slideToggle('fast');
            $contentShowHide.eq(i).toggleClass('collapsed');

            if ($contentShowHide.eq(i).hasClass('collapsed')) {
                $('.icon-show-hide', this).text('+');
            } else {
                $('.icon-show-hide', this).text('-');
            }
        });
    });

This fixed my problem but I have no idea why this works.

Jquery Event bound twice after ajax call

jQuery doesn't check if an event listener is already bound to an element before binding listener for the same event. In your code, .myClickableElement selects all such elements, and for existing elements, duplicate listeners will be added.

By unbinding the event listeners first

One way you can fix this is to remove the listener first, and then bind it again. In this way, it will exist once for each target element.

function bindButtonClick(){
  $('.myClickableElement').off('click').on('click', function(){
    ... event handler code ...
  });
}

By using event delegation on parent element

Another (but effective) way is to use event delegation for child elements. I don't know much about your HTML, but you can do this on the parent element (.parent here is the parent for all .myClickableElement elements):

$('.parent').on('click', '.myClickableElement', function() {
  ... event handler code ...
});

This will enable event binding for those elements as well, which are not present in the DOM when this code executes. So this will be a generic solution for your problem, and you won't need to bind the listeners when the AJAX completes.

jQuery click() event not firing on AJAX loaded HTML elements

Do this.

 $(document).on("click",".sframe",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 
 });

or

 $(document).delegate(".sframe","click",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 

 });

Edit:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate().

---

Related Topics