After Content Update from Ajax Jquery Not Work Properly

jQuery doesn't work after content is loaded via AJAX

jQuery selectors select matching elements that exist in the DOM when the code is executed, and don't dynamically update. When you call a function, such as .hover() to add event handler(s), it only adds them to those elements. When you do an AJAX call, and replace a section of your page, you're removing those elements with the event handlers bound to them and replacing them with new elements. Even if those elements would now match that selector they don't get the event handler bound because the code to do that has already executed.

Event handlers

Specifically for event handlers (i.e. .click()) you can use event delegation to get around this. The basic principle is that you bind an event handler to a static (exists when the page loads, doesn't ever get replaced) element which will contain all of your dynamic (AJAX loaded) content. You can read more about event delegation in the jQuery documentation.

For your click event handler, the updated code would look like this:

$(document).on('click', "#click", function () {
    $('#click').css({
        "background-color": "#f00",
        "color": "#fff",
        "cursor": "inherit"
    }).text("Open this window again and this message will still be here.");
    return false;
});

That would bind an event handler to the entire document (so will never get removed until the page unloads), which will react to click events on an element with the id property of click. Ideally you'd use something closer to your dynamic elements in the DOM (perhaps a <div> on your page that is always there and contains all of your page content), since that will improve the efficiency a bit.

The issue comes when you need to handle .hover(), though. There's no actual hover event in JavaScript, jQuery just provides that function as a convenient shorthand for binding event handlers to the mouseenter and mouseleave events. You can, however, use event delegation:

$(document).on({
    mouseenter: function () {
        $(this).stop().animate({
            width: xwidth * 3,
            height: xheight * 3,
            margin: -(xwidth / 3)
        }, 200); //END FUNCTION

        $(this).addClass('image-popout-shadow');
    },
    mouseleave: function () {
        $(this).stop().animate({
            width: xwidth,
            height: xheight,
            margin: 0
        }, 200, function () {
            $(this).removeClass('image-popout-shadow');
        }); //END FUNCTION

    }
}, '.image-popout img');

---

jQuery plugins

That covers the event handler bindings. However, that's not all you're doing. You also initialise a jQuery plugin (colorbox), and there's no way to delegate those to elements. You're going to have to simply call those lines again when you've loaded your AJAX content; the simplest way would be to move those into a separate named function that you can then call in both places (on page load and in your AJAX requests success callback):

function initialiseColorbox() {
    $(".iframe").colorbox({
        iframe: true,
        width: "1000px",
        height: "500px"
    });
    $(".inline").colorbox({
        inline: true,
        width: "50%"
    });
    $(".callbacks").colorbox({
        onOpen: function () {
            alert('onOpen: colorbox is about to open');
        },
        onLoad: function () {
            alert('onLoad: colorbox has started to load the targeted content');
        },
        onComplete: function () {
            alert('onComplete: colorbox has displayed the loaded content');
        },
        onCleanup: function () {
            alert('onCleanup: colorbox has begun the close process');
        },
        onClosed: function () {
            alert('onClosed: colorbox has completely closed');
        }
    });
}

Jquery click doesn't work after updating with AJAX

You need to use Event Delegation:-

So change::-

$('.cancelbox').each(function(){
  $(this).on('click',function(){

To::-

$(document).on('click','.cancelbox',function(){

So code need to be:-

$(document).on('click','.cancelbox',function(){
    $.ajax({
        type : 'POST',
        url  : 'menus/deleteTmp',
        data : {
            '_token' : $('input[name=_token]').val(),
            'id' : $(this).data('menuid'),
        },
        success : function ($data) {
            $('.item' + $data).remove();
        }
    });
});

Note:- now apply your replaceWith()code and check

JQuery not working after ajax update in jsf

Place your js code into a function and call it in oncomplete of your p:ajax

Like this

<p:ajax update="outPan" event="change" oncomplete="myFunc()" /> 

js code:

<script type="text/javascript">
$(document).ready(function(){
    myFunc();
});
function myFunc() {
    $('#sButton').prop('disabled',true);
    $('#wType').css({'border':'red'})
}
</script>

---

Explanation:

There is not ready event after primefaces ajax (after all it an ajax and not a full page reload)

If you want to hook some js code after the p:ajax , you can use its onsuccess attribute

JQuery not working after inserting DIV content using AJAX

You must delegate from the elements existing when you do the binding, you can use on for that.

Change

$('#ajax li').click(function() {    

to

$('#ajax').on('click', 'li', function() {    

Jquery events not working on ajax loaded content

It's because you are binding the event on document ready. You have to use a delegate in order for this to work. Like on. It's because .header isn't on the page on the page when it's loaded. So no event is attached.

Your code should look some along the lines of this:

$('body').on('click','.heading',function(){
     $(this).css('color','red');  
});   

It doesn't have to be body, but an element which isn't loaded after document ready, which is a parent of .heading.

why does this not work?? jquery ajax replace content in specific div

You should call ajax with specified type that you want to get.

 $.ajax({ 
        url: pageLocation, 

        //on success, set the html to the responsetext
        success: function(data){ 
            $("#biocontent").html(data); 
        },
        dataType : "html"
    });

jquery .css function not working after ajax success

I have an idea,

try doing this,

 $(document).on('click','.commentpost',function(e){
     //ajax call happens
     //and on success reload div commentsDiv with .load()
 })

using the document to understand if there is a clickable element, since I think you have the clickable div being changed.

It works good because if elements are being dynamically created via ajax jquery, you go to understand that those new divs did not exist on document ready, only the original one, so document on click looks at what exists in the document currently everytime and prevents event bubbling when divs changes

Ajax not updating until page reload

Your registered handlers are only registered on pre-existing elements.
When you add new element you either need to create new handlers, or (better) do something like this

$( ".some-container-of-your-elements" ).on( "click", ".element-you-wish-to-listen", function() {
    console.log( "Magic!" );
});

---

Related Topics