CODEWITHSUNDEEP
javascriptjqueryajaxhtml
ndesign11
ndesign11

Reputation: 1779

Ajax load is only working for a single instance

I have a button that loads in some form elements, but when the user clicks the button more than once it doesn't add the data again. It only seems to work 1 time. I need it to add the ajax every time the user clicks the button.

    $(".add-media-item").on("click", function () {
            $( ".media-item-zone" ).load( "/includes/add-media-item");
    });

Upvotes: 0

Views: 82

Answers (2)

Jeff Gran
Jeff Gran

Reputation: 1595

.load(...) will replace the content that's there with the content you get from the server. You probably need to use .append(), which also means you'll have to write a more custom ajax request handler. Something like:

$(".add-media-item").on("click", function () {
        $.get("/includes/add-media-item", function(response) {
          $( ".media-item-zone" ).append(response);
        });
});

Upvotes: 3

TheUberUser
TheUberUser

Reputation: 121

Try to clear ".media-item-zone" at the top of your click handler. Also if .add-media-item is within .media-item-zone, it might be getting wiped by the load function (seems unlikely as it would throw an exception, so be sure to check your js console!)

Upvotes: -1

Related Questions