Jquery 在ajax成功回调中更改其id后，附加有按钮的函数不起作用

当我单击按钮时，它的id、name和val属性在ajaxsuccess中成功更改。但是，如果我再次单击它，附加到以前id的旧函数将被调用，而不是附加到新id的函数。我检查了其他帖子，但它们也不适用于我

<input type="submit" name="textareaInsert" id="textareaInsert" class="textareaInsert" value="Insert data">


//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.');
         }
    });
}

//剧本
$（文档）.ready（函数（）{
图_post_data（）；
图_更新_数据（）；
});
函数图\u post\u data（）{
$（'#textareaInsert'）。在（“单击”，函数（）{
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 | |图形数据！=''）{
$.ajax({
类型：“post”，
url:“reg2.php”，
数据：{insert:insert，poll\u id:poll\u id，graph\u data:graph\u data，ownerid:ownerid，ownername:ownername}，
成功：函数（）{
$（'#textraeainsert'）.attr（“id”，“textraeaupdate”）.attr（“name”，“textraeaupdate”）.val（“Update”）；
}
}).错误(
函数（）{
日志（“插入图形数据时出错”）
}
).成功(
功能（数据）{
var Poll_insert_data=jQuery.parseJSON（数据）；
$（“#poll_author”）.text（poll_insert_data.data.publisherName）；
$（“#所有者_输入_数据”）.append（Poll_insert_data.data.data）；
}
);
}否则{
警惕（‘请先写点东西’）；
}
});
}
函数图\u更新\u数据（）{
$（'#textareaUpdate'）。在（“单击”，函数（）上）{
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 | |图形数据！=''）{
$.ajax({
类型：“post”，
url:“reg2.php”，
数据：{update:update，poll\u id:poll\u id，graph\u data:graph\u data，ownerid:ownerid，ownername:ownername}，
}).错误(
函数（）{
log（“更新图形页面数据时出错”）
}
)
.成功(
功能（数据）{
var Poll_insert_data=jQuery.parseJSON（数据）；
$（“#poll_author”）.text（poll_insert_data.data.publisherName）；
$（“#所有者_输入_数据”）.text（“”.append（Poll_insert_data.data.data）；
}
);
}否则{
警惕（‘请先写点东西’）；
}
});
}

---

当我第一次单击按钮时，“插入数据”成功地将其属性更改为“上载”。但当我单击“上载”时，调用函数graph\u post\u data（）而不是graph\u update\u data（）。我不明白有什么问题。请帮我弄清楚

您不会将事件附加到id…而是将其附加到元素

如果您更改该元素的属性……它不会更改绑定到它的事件

因此，如果您更改id…并使用该选择器添加一个新的事件侦听器，如果您不希望旧侦听器再处于活动状态，则需要删除它

您可以执行以下操作：

$('#newID').off('click').on('click', function(){
   // do something
})

var update = false;

$('#textareaInsert').on('click', function () {
    if (update) {
        // do update logic
    } else {
        // do insert logic
        update = true;
    }
}

---

如果使用事件委派附加函数，它们将适用于id，而不是绑定到元素：

$(document).on('click', '#textateaUpdate', function () {
    ...
}

编辑：您的解决方案与我建议的上述更改：

<input type="submit" name="textareaInsert" id="textareaInsert" class="textareaInsert" value="Insert data">


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

function graph_post_data() {
    $(document).on('click', '#textareaInsert', 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() {
    $(document).on('click', '#textareaUpdate', 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.');
         }
    });
}

---

这就意味着不要乱搞ID和重复的处理程序

id

应该是该特定元素的唯一标识符。即使有合理的理由，你也不应该改变它。我做了这样的事情-$（'textareaUpdate'）。关闭（'click'）。打开（'click'，函数（）{/}），但它仍然运行graph_post_data（），而不是graph_update_data（）。然而，这起了作用，部分与现在的graph_post_data（）和graph_update_data（）一样正在一起运行。您是否将两个单击处理程序都更改为使用委派？还是仅更新一个？此外，您的代码将始终运行graph_post_数据和graph_update_数据，因为它们都在document ready中被调用。我们正在更改的是，哪个单击处理程序被称为I刚才在update btn上使用委派。当我应用于这两个处理程序时，它都不起作用g、 当我在其中任何一个上应用时都是这样。graph_post_data（）数据运行一个插入sql，其中graph_update_data（）运行更新。这就是为什么我需要更改id以在单个按钮上运行不同的函数。这就是我更改的：$（'#textareaInsert'）。打开（“单击”，函数（）{…}和$（文档）。关闭（“单击”，“textareaInsert”）。打开（“单击”，“#textareaUpdate”，函数（）{/}。这是在更新所需的行，但也添加了一个类似的额外行。我的Qtn即使在应用off（）之后也是如此。#textInsert btn工作如何？