jQuery clone() and event Listeners
<p>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.</p>

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

<p>Here's the cloning function:</p>

<pre><code>$('#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);
</code></pre>

<p>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?</p>

<p>Best</p>