jQuery .on function not working after ajax call

Question

My jQuery .click functions are not working on content that is loaded with ajax. I changed my .click to .on ("click") functions because I read that event delegation would fix the problem. Here is my ajax call:

    $(".piece:nth-child(1)").click(function() {
        $.ajax({
            url: "terra.html",
            datatype: "html",
            async: false,
            success: function(data) {
                $("body").fadeOut(function() {
                    $(this).html(data).slideDown(500);
                });
            }
        });
    });

And this is the function that is not working after the ajax call:

$(document).on('click', ".pin", function() {
    $(this).css("z-index", "99");
    $(".dropdown-container").animate({"top": "0px"}, 500, "ease");
    $(".terra-arrow-dropdown").show();
    $(".interact .terra-arrow").fadeOut(300);
    $(".interact .screen").addClass("screen-opacity");
});

Is the element with the .pin class on the page when it is loaded? — user2182349
– user2182349, Commented Nov 15, 2015 at 0:19
@user2182349 it is on the page being loaded with Ajax, which is titled terra.html. It is not on the index.html page — Austin Branham
– Austin Branham, Commented Nov 15, 2015 at 0:35
@guest271314 Its part of a web design portfolio. The entire document includes a number of things, interactive divs, images etc — Austin Branham
– Austin Branham, Commented Nov 15, 2015 at 2:48
@guest271314 what would be the best way of sending you the contents of terra.html? — Austin Branham
– Austin Branham, Commented Nov 15, 2015 at 2:48

guest271314 · Accepted Answer · 2015-11-15 03:25:06Z

1

Does returned html include <!doctype> declration ? , <html> element ?

yes it includes all of that.

Appear body element is overwritten at

$("body").fadeOut(function() {
  $(this).html(data).slideDown(500);
});

Try removing <!doctype> declaration , <html> , <body> tags from terra.html .

If <script> tags are in body element , move script elements to head of original document , for script where

$(document).on('click', ".pin", function() {

not to be overwritten when

$(this).html(data)

called , which replaces all html of body element - including any child script elements

edited Nov 15, 2015 at 3:25

answered Nov 15, 2015 at 3:05

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Branham Over a year ago

Actually, removing the easing parameters in my animate functions did the trick. Would it be proper to also go ahead and fix all of this as well?

cyk · Accepted Answer · 2015-11-15 00:29:54Z

0

Check your console.log for errors. My guess is that your ajax callback function is failing because jQuery's fadeOut's first parameter is the duration and the second is the callback function. So you would need something like this.

$(".piece:nth-child(1)").click(function() {
    $.ajax({
        url: "terra.html",
        datatype: "html",
        async: false,
        success: function(data) {
            $("body").fadeOut(500, function() {
                $(this).html(data).slideDown(500);
            });
        }
    });
});

The way you are doing event delegation ( $(document).on('click', ".pin", function() {... ) should work.

answered Nov 15, 2015 at 0:29

cyk

5812 silver badges8 bronze badges

1 Comment

Austin Branham Over a year ago

This unfortunately did not fix it. I've included some info in the comment section above.

Collectives™ on Stack Overflow

jQuery .on function not working after ajax call

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related