jQuery clone() and event Listeners

Question

I'm running into an issue with the clone() function in jQuery. I have an event listener that simply blanks out the field when it loses focus. Before cloning anything on the page, the function is working as expected. However, when I call the clone function, not only the listener isn't working on the cloned bloc but it also apparently unbinds totally the listener and the previous field that I could blank out doesn't work anymore.

//Blanks out prsy field when the user leaves the field
    $(document.body).on('blur','.prsy-field', function () {
        $(this).val("");
    });

Here's the cloning function:

$('#clonedInput1').clone(true, true)
            .insertAfter($(this).prev().prev())
            .attr("id", "clonedInput" + cloneIndex)
            .find("*")
            .each(function () {
                var id = this.id || "";
                var name = $(this).attr("name") || "";
                if (id != "") {
                    this.id += "-" + cloneIndex;
                }
                if (name != "") {
                    $(this).attr("name", $(this).attr("name") + "-" + cloneIndex);
                }
            }).find('input').val('') //clear out the inputs
            .on('click', 'a.add-project', clone);

I tried several variants with on, live, document or trying to target the prsy-field input directly but none have worked so far. Anyone has an idea why the cloning function unbinds the event listener?

Best

I would recommend seeing this thread http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-an-object-in-javascript — Wax Cage, Aug 31 '16 at 14:04
Yes, but ONLY DOM elements, no JS event listeners... try what i suggested bellow. — Wax Cage, Aug 31 '16 at 14:08
have you tried `$('.prsy-field').live('blur', function() { .... })` ? — Ricardo Pontual, Aug 31 '16 at 14:15
@RicardoPontual Yes I tried it already. This type of targeting doesn't work for dynamically added DOM elements such as cloning. Thanks — vegas2033, Aug 31 '16 at 14:17
@WaxCage No that didn't work. If the listener is global ($(document).on()) it should work on dynamic elements too — vegas2033, Aug 31 '16 at 14:18

jQuery clone() and event Listeners

0 Answers0