function attached with a button not working after changing its id in ajax success callback : <p>When I click the button its id, name and val attribute change successfully in ajax success. But if If I click it again the old function attached to the previous id is called not the one attached to the new id. I checked other posts but they did not worked for me either.</p>

<pre><code>&lt;input type="submit" name="textareaInsert" id="textareaInsert" class="textareaInsert" value="Insert data"&gt;


//script
$(document).ready(function() {
    graph_post_data();
    graph_update_data();
});

function graph_post_data() {
    $('#textareaInsert').on("click", function() {
        var poll_id = $('#poll_id').val();
        var graph_data = $('#graphPost').val();
        var ownerid = $('#ownerid').val();
        var ownername = $('#ownername').val();
        var insert = 'insert';

        if(ownerid != null || graph_data != '') {
            $.ajax({
                type:"post",
                url:"reg2.php",
                data: {insert:insert, poll_id:poll_id, graph_data:graph_data, ownerid:ownerid, ownername:ownername},
                success: function() {
                     $('#textareaInsert').attr("id", "textareaUpdate").attr("name","textareaUpdate").val("Update");
             }
            }).error(
                function() {
                    console.log("Error in inserting graph data")
                }
            ).success(
                function(data) {
                    var Poll_insert_data = jQuery.parseJSON(data);
                    $('#poll_author').text(Poll_insert_data.data.publisherName);
                    $('#owner_input_data').append(Poll_insert_data.data.data);
                }
            );
        } else {
            alert('Please write something first.');
        }
    });
}


function graph_update_data() {
    $('#textareaUpdate').on("click", function() {

         var poll_id = $('#poll_id').val();
         var graph_data = $('#graphPost').val();
         var ownerid = $('#ownerid').val();
         var ownername = $('#ownername').val();
         var update = 'update';

         if(ownerid != null || graph_data != '') {
         $.ajax({
         type:"post",
         url:"reg2.php",
         data: {update:update, poll_id:poll_id, graph_data:graph_data, ownerid:ownerid, ownername:ownername},
         }).error(
         function() {
         console.log("Error in updating graph page data")
         }
         )
         .success(
         function(data) {

         var Poll_insert_data = jQuery.parseJSON(data);
         $('#poll_author').text(Poll_insert_data.data.publisherName);
         $('#owner_input_data').text("").append(Poll_insert_data.data.data);

         }
         );
         } else {
         alert('Please write something first.');
         }
    });
}
</code></pre>

<p>When I click the button first time 'Insert data' successfully changes its attributes to that of "Upload". But when I click "Upload", function graph_post_data() is called instead of graph_update_data(). I'm not getting what's the problem. Please help me figure it out.  </p>
