Javascript/jquery event not getting bind with elements loaded using ajax

Hi,

I have a popup which loads different link using ajax. by clicking of it, it get’s added on child window in select box. On change event of select box there is one event to perform some action.
When user select any link in parent window we want to fire the same event but it’s currently not happening.

Tried with jquery delegate, on, live but no success.

Actual problem is javascript is not recognizing the element loaded using ajax.

Please help me.

Note: I don’t have control on pop up window code only javascript/jquery can apply it

Please help us to help you. Provide a minimal code sample for us to recreate your problem.

Hi,

In my web page on click on one link, pop up get open.
Pop up is a dynamic created element div with Z index.
This popup have many html elements like ul, li, a tag. In a pop up there is one link on click of it i have to stop the default behavior and redirect to a user on another page.

somehow, i am not able to bind click the event to a pop up element.
I tried the following code but it’s not working:

window.$(".ui-dialog .lia-list-tree .lia-list-tree-toggle-container").on("click","a", function(event){
        event.preventDefaul();                                                                                                                                                                       
        if($(this).attr('href')!=="#"){
        	$(window).unbind(); 
                window.location.href=$(this).attr('href');
        }
});

ui-dialog is a class of div which created dynamically.

Please provide me the solution.

Just a rough guess but if the element doesn’t exist yet then you need to start from an element that is already in the page and then it will find the dynamic target.

e.g.

 $("body").on("click",".ui-dialog .lia-list-tree .lia-list-tree-toggle-container a", function(event){
        event.preventDefault();                                                                                                                                                                       
        if($(this).attr('href')!=="#"){
        	$(window).unbind(); 
                window.location.href=$(this).attr('href');
        }
});
2 Likes

Hi, do you try to bind the event handler before the pop-up is getting created? In this case it can’t work; you have to bind it to an element which was there before (in case of doubt, to document). I assume that’s what you were trying to do by preceding it with window., but you’re just accessing jQuery this way. Just a shot in the dark, but try this:

$(document).on(
    'click',
    '.ui-dialog .lie-list-tree-toggle-container a',
    function(event) {
        event.preventDefault();                                                                                                                                                                       
        if ($(this).attr('href') !== '#') {
            $(document).unbind(this);
            window.location.href = $(this).attr('href');
        }
    }
);

x-post :-)

Hi,

Yes, I tried to bind the event handler before the pop up is getting created.

Also checked the code by your approach but no luck, tried ti use body instead of document still issue exist.

$(document).on(
‘click’,
‘…ui-dialog .lia-list-tree .lia-list-tree-toggle-container’,
function(event) {
event.preventDefault();
if ($(this).attr(‘href’) !== ‘#’) {
$(document).unbind(this);
window.location.href = $(this).attr(‘href’);
}
}
);

There are two small issues: You have 2 dots before the first selector, and you forgot to filter for the actual <a> element.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.