Jquery Click Function Doesn't Work 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 function not working after making an ajax call

Try this

 $( "body" ).delegate( ".chkBx", "change", function() {
       showProduct();
    });

    $( "body" ).on("change",".chkBx",function(){
       showProduct();
     });

Onclick event doesn't work after AJAX in JQuery issue

.delete-person is an element that is dynamically added to the DOM after the AJAX call has been made. Since your jQuery script runs upon DOMready (when .delete-person is not present during runtime), the click event would not be bound to the element.

The line $('.delete-person').on('click', function() { ... }); is functionally identical to $('.delete-person').click(function() { ... });. The gist is that you are attaching the click event handler to the element .delete-person, which is not present in the DOM at runtime.

Instead, listen to the click event originating from .delete-person that is bubbling up to the document object instead:

$(document).on('click', '.delete-person', function() {
    // Do stuff here to delete person
});

What the above code does differently is that you are listening for the click even on the document object, but verifying that the click event originated from a child element that has a class of .delete-person. Since the click event will always bubble to the document regardless of whether the object is present or absent during runtime, you will be able to delete the person this way ;)

Click not working after ajax content has loaded

.live() is deprecated. Use .on() instead.

$("body").on("click", "divClass", function(event){
    alert('gotClicked');
});

Also, just to make sure you're calling the div correctly, it shouldn't be the div name it should be the div class when calling it in that fashion.

Also, using live() and on() needs to be applied at a parent level that exists at the document load. If this divName you're using didn't exist when the page loaded itself it can't be bound to. However, if you bind to the body element, then it'll always look for the div when the click occurs.

Jquery on click event is not working when ajax call is running at loop

Problem is that the $(this) will hold all elements of the selector. And will also now with one as it will be triggered one time and then never again. Also as can be seen from here, delegate events should be at the closest static element that will contain the dynamic elements.

    function ButtonEvent(button, url, state)
    {
        $("body").on("click", button, function (e) {

            e.preventDefault();
            var button = e.target;

            var id = $(button).data("id");
            var currentRow = $(button).closest("tr");
            var cell = currentRow.children('td.requestState');

            UpdateRequests(url, state, id, cell);
        });
    }

jQuery on click not working after ajax call

I fixed it using different on click jquery replace of if/else method. Here is my current jquery codes:

And jQuery is:

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("li.menu-item-has-children ul").hide();
    });
    jQuery(document).on("click", "li.menu-item-has-children a", function() {
        jQuery(this).next("ul").toggle();
    });
    jQuery(document).on('click','li.menu-item a', function(){
        var href = jQuery(this).attr('href');
        if (href === undefined || jQuery.trim(href) === '') {
            //event.preventDefault();
            console.log('No href value');
        }else{
            jQuery('section.side_menu').removeClass('open-menu');
            jQuery('#side_menu_button_links').removeClass('open').addClass('close');
        }
    });

    // If menu Open
    jQuery(document).on('click','a.side_menu_button_links.large.open', function(e){

        jQuery(this).removeClass('open').addClass('close');
        jQuery('section.side_menu').removeClass('open-menu');

    });
    // If Menu Close
    jQuery(document).on('click','a.side_menu_button_links.large.close', function(e){

        jQuery(this).removeClass('close').addClass('open');
        jQuery('section.side_menu').addClass('open-menu');

    });

    jQuery(document).on('click','a.close_my_menu', function(){
        jQuery('section.side_menu').removeClass('open-menu');
        jQuery('#side_menu_button_links').removeClass('open').addClass('close');
    });
</script>

I don't know what's wrong with if / else code. After ajax request if+else work at a time. I mean 1st menu was open & then close. I track this using console.log();

Button created after ajax call not working while event is triggered

The event is registered before the elements exist in the DOM, which is why the function is not triggered. The solution is to define the code after your ajax or use event delegation as below

$(document).ready(function() {
  $(document).on("click", "#check tr td button", function() {
    alert('here');
  });
});

jQuery functionality not working after AJAX call

You need to use event delegation to attach events for dynamically loaded elements:

j$(document).on('click','a.dropDown',function(e){
    e.preventDefault();
    j$(this).closest('.row').next().toggleClass('hidden');
});

click function not working after ajax call replaces contents of the page

Use a delegated event handler instead:

$(document).on('click', ".conversation", function(){
     // Your handler code
});

This works by listening for the event at a non-changing ancestor element, then applying the jQuery filter to any elements that generated the event, then applying the function to any elements that matched and generated the event.

Note: Use the closest non-changing ancestor for efficiency, or document as the fallback. Do not use 'body' as it has some bugs

---

Related Topics