Question

当我单击按钮时，其id，name和val属性在ajax成功中成功更改。但是，如果我再次单击它，则会调用附加到先前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.');
         }
    });
}

当我第一次点击按钮时，“插入数据”成功将其属性更改为“上传”。但是当我点击“上传”时，调用函数graph_post_data（）而不是graph_update_data（）。我没有得到什么问题。请帮我搞清楚。

Answer 1

您没有将事件附加到ID ...您将其附加到元素。

如果更改该元素的属性和属性....它不会更改绑定到它的事件。

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

您可以执行以下操作：

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

Answer 2

如果使用事件委托附加函数，它们将适用于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.');
         }
    });
}

这应该可行但是正如Praveen Kumar正确指出的那样，你永远不应该改变已经渲染的元素的id。所以你应该使用类似的东西：

var update = false;

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

这意味着没有使用ID和重复处理程序搞乱！

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

2 个答案: