On change isn't working for newly added row
<p>All,
I've got the following jQuery code:</p>

<pre><code>jQuery("#add_timeline_row").on("click", function(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
    var total_rows = jQuery('[name="timeline_num[]"]').length;
    alert(total_rows);
    total_rows = total_rows + 1;
    jQuery.post(site_url + "add_row.php", { total: total_rows },
        function(response) {
            jQuery('#timeline_table tr:last').after(response);
        });
});
</code></pre>

<p>This works fine and basically adds a row after my DOM has finished loading if the user clicks on the button. I've added the .on function so jQuery recognizes it since the DOM was already loaded. My issue is that it creates a select field. I then have the following jQuery to remove a row if a certain select value is selected:</p>

<pre><code>jQuery('.event_selection').on('change' ,function(){
    var selected_event = jQuery(this).val();
    var fullId = jQuery(this).attr('id');
    var event_id = fullId.split('_');
    if(selected_event=="delete"){
        jQuery("#row"+event_id[1]).remove();
    }
});
</code></pre>

<p>The rows get removed for any row that was added in the DOM but the change doesn't get recongized for any new row that I added though my first snippet of jQuery. Any reason why this isn't working how I expect it to?</p>

<p><strong>EDIT:</strong>
I created a JS fiddle for this. It can be found here: <a href="http://jsfiddle.net/Kc5R8/" rel="nofollow">http://jsfiddle.net/Kc5R8/</a></p>

<p>After you click the Add New Row it loses all of the functionality and doesn't produce an alert when the new drop down box is changed.</p>

<p>Thanks for any advice in advance!</p>
