Apply JS to dynamically created divs?
<p>I have multiple div's on my page, that can be added to the page dynamically, and can also be removed.</p>

<p>On page load, the dynamically created div's are loaded from <code>localStorage</code> with uniqiue id's and a <strong>common class depending on the div</strong>, and I call a function along with that, <code>content()</code>.</p>

<p>The function <code>content()</code> looks like this:</p>

<pre><code>function content(){
    alert("test");
    $(".two button").click(function(){
        var id = $(this).parent().attr("id");
        alert(id);
    });
}
</code></pre>

<p>Pretty simple, all it does is alert "test" when the function is called, and if you click <code>.two</code> <code>&lt;button&gt;</code>, it will alert <code>.two</code> <code>&lt;textarea&gt;</code> <code>.val()</code>.</p>

<p>This works fine once the div's have been loaded, but I run into the problem when I clone the div's</p>

<p>When I clone the div's, it gives them a unique id and a common class like above. At the end of <code>cloneDiv()</code>, I call <code>content()</code>, so that clicking on the elements inside will produce the same results as above.</p>

<p>The problem is, the function will get called as many times as there are div's on the screen, but also means that clicking on the <code>&lt;button&gt;</code> in div <code>.two</code> will alert <code>.two</code> <code>&lt;textarea&gt;</code> <code>.val()</code> <strong>three times</strong>.</p>

<p>TLDR; Clicking on the button in <code>.two</code> get's called as many times as there are div's on the screen, as the function is called once the dynamic div is created, but should only be called once.</p>

<p>There's a lot of code to do all this, but I think I explained what happens pretty clearly. I will however whip up a demo if that would help more.</p>
