jQuery on() doesn't work on already added DOM items
<p>I have this:</p>

<pre><code>$(document).on("click", ".prev", function(){
    $(this).closest("div").find(".slider").animate({
        "left": "+=450px"
    }, 800, "easeInOutBack");
    return false;
});
</code></pre>

<p>Which works when new elements are added to the DOM, but it doesn't work for elements that are already in the DOM.</p>

<p>When I do this:</p>

<pre><code>$(".prev").on("click", function(){
    $(this).closest("div").find(".slider").animate({
        "left": "+=450px"
    }, 800, "easeInOutBack");
    return false;
});
</code></pre>

<p>It works for elements in the DOM, but not new ones added to the DOM. Is there a way for me to get this to work for both without me having to write this 2 times, or make a call to another function?</p>

<p>Here is a screen shot:</p>

<p><img src="http://i.stack.imgur.com/gWtIw.png" alt="Shot"></p>

<p>So, Here is a more in depth description of how it works.</p>

<pre><code>&lt;div id="simple-pevs" style="padding-right: 20px;"&gt;
    &lt;?php require_once __DIR__ . "/data/get/PEVSection.php"; ?&gt;
&lt;/div&gt;
</code></pre>

<p>Then When someone wants to add another section they click on the add button which then runs this code:</p>

<pre><code>    $(".add-another-pev").click(function(){
        $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){
            $("#simple-pevs").append(data);
        });
        pevGroup++;
        return false;
    });
</code></pre>

<p>As you can see it is calling the same one that was pre-loaded in the php. The new one works (and any other additional ones added) with the click event and the fist one doesn't</p>

<p><strong>@ArunPJohny</strong></p>

<p><code>console.log($(".prev"));</code> after a new element is added:</p>

<pre><code>[a.prev, a.prev, prevObject: b.fn.b.init[1], context: document, selector: ".prev", jquery: "1.9.1", constructor: function…]
0: a.prev
1: a.prev
context: #document
length: 2
prevObject: b.fn.b.init[1]
selector: ".prev"
__proto__: Object[0]
</code></pre>
