0

I have this in JQuery:

$(function() {

$(".dup").on("click", function(e) {


    var panel = $(this).closest(".panel");


    var tab = $(this).closest("tr").find("a.collapsed").text();
    var cc = 0;
    $(".panel").each(function() {
        var text = $(this).find("a.collapsed").text();
        if (text === tab)
            cc++;
    });

    if (cc < 4)
        $(panel).clone().insertAfter(panel);
    e.preventDefault();

});
$(".rem").on("click", function(e) {
    e.preventDefault();

    if ($(".panel").length > 1)
        $(this).closest(".panel").remove();
});
});

I have so two link that if you click them add and remove an element with some limits. Ok this function partially because the elements, that are added dinamically by click, when press on their link of add or remove not function! The page is reloaded and come back the initial situation!

So the problem are the element add dinamically that are unbinded with click event! I have seen other question that recommend to use .on instead of .click but the result is the same for both. Can you help me?

Dimitri Dewaele
  • 10,311
  • 21
  • 80
  • 127
Riccardo
  • 101
  • 8
  • 2
    Use [event delegation](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). e.g.: `$(document).on("click", ".dup", function...` and `$(document).on("click", ".rem", function...` – blex Mar 22 '15 at 23:23
  • Thanks so much! I have done as you suggest and now function, perfect! – Riccardo Mar 22 '15 at 23:35

0 Answers0