form + code

There is a form with an ordinary input-text field, below is a list of entered data, which is taken from the database.

1) There is a function $("#FormSubmit").click(function () {..} , which adds the name just entered to the list, via append . Next, this name is transmitted via ajax and added to the database.

2) There is a function $(".cat_del").click(function() {..} , which when you click on the cross (delete) hides the desired line from the list via hide() , then ajax sends a command to delete the desired entry from the database Everything works if you load the page and start deleting, but if you add a new entry and click on .cat_del (delete) on it, the function is not called, but it starts working if you reload the page.

Why it happens?

    1 answer 1

    Because you had entries that you assigned (like, hey, everyone with the cat_del class) function to be deleted. And then you added another entry, but you didn’t appoint anything to remove it (she’s new and didn’t hear that of your team).

    As a solution, in ajax-e, in success:function re-write $(".cat_del").click(function() {..} , but it's better to put all this into a separate function.

    Or rewrite your function like this:

    $('body').on('click', '.cat_del', function(event){ event.preventDefault(); ... дальше ваш код }

    in this case, everything will work without being called again after ajax-a

    • Excellent thank you! - Alexander