CODEWITHSUNDEEP
jqueryajax
pileup
pileup

Reputation: 3262

Make ajax work on newly created element without refresh

I know this must've been asked in slightly different ways, but for my specific code, I can't find out the cause for the problem: I have a button that needs to act as a switch, between "Add" and "Remove", so if the removal was successful I replace the button with "Add" and if the Adding was successful I replace it with "remove", adding a new (unique) id. The problem is that after I replace the Remove to Add, then when i click on it again nothing happens, like it doesn't exist (Although it's there in the inspect element).

           $(document).ready(function () {
            $(".add").on("click", function () {
                var id = $(this).attr('id');
                var this_button = $(this);
                $.post("add.php", {user_id: 42, add_id: add_id}) // these ids are just examples for my testings
                        .done(function (data) {
                            var arr = JSON.parse(data);
                            var rows = parseInt(arr.num_rows);
                            if (rows > 0) {
                                alert("Exists");
                            } else {
                                alert("CREATED");
                                $(this_button).replaceWith("<button id =" + 220 + " class = \"button remove\">Remove</button>");
                            }



                  });
            });

            $(".remove").on("click", function () {
                var id = $(this).attr('id');
                var this_button = $(this);
                $.post("remove.php", {user_id: 42, removal_id: removal_id}) // these ids are just examples for my testings
                        .done(function (data) {
                            var arr = JSON.parse(data);
                            var rows = parseInt(arr.num_rows);
                            if (rows > 0) {
                                alert("DELETED");
                            } else {
                                 $(this_button).replaceWith("<button id =" + 225 + " class = \"button add\">Add</button>"); //this id is also for testing
                            }                       

                  });
            });
        });

Upvotes: 0

Views: 29

Answers (2)

treyBake
treyBake

Reputation: 6560

it's because jQuery targets the DOM on load - meaning anything new isn't part of the scope. But fear not, you can target like this:

$(document).on('click', '#my-dynamic-element-id', function()
{
    //code to run
});

this activates when the document is clicked, but only for elements with a matching id / class

Upvotes: 2

acdcjunior
acdcjunior

Reputation: 135762

To handle dynamically adding/removing elements, don't bind the event handler directly to them:

$(".add").on("click", function () { //...
$(".remove").on("click", function () { //...

Use event delegation instead:

$(document).on("click", ".add", function () {
$(document).on("click", ".remove", function () {

Upvotes: 2

Related Questions