javascript - 使用 jQuery 更改表单的 id 但 jQuery 使用旧属性来识别它

Question

我有一个表单，它的内容每次都会更改(例如收件箱和已发件箱项目)。我想更改表单提交按钮的 Angular 色。我这样做:

1. 首先，当我改变位置时，我重命名了通过 ajax 请求提交的表单 ID。($('#onlist').submit(function ())

2. 最后，我根据新的表单 ID 定义了一个新的 ajax 请求。($('#onsentlist').submit(function ())

但似乎第二种形式也使用了我为旧形式 id 描述的旧函数。为什么会发生这件事？有办法解决吗？还是新的解决方案？谢谢。这是代码:

$(document).ready(function () {
    $('#onlist').submit(function () {
        var formData = new FormData($('#onlist')[0]);
        $('#res').append("<div id='alertshow' class='alert alert-info'><a href='#' class='close' data-dismiss='alert'>&times;</a><strong></strong>Loading,Please Wait...</div>");

        $.ajax({
            url: 'deletemsg.php',  //Server script to process data
            type: 'POST',
            data: formData,
            async: false,
            success: function (msg) {
              $('#res').empty().append(msg);
              $('form input:checked').parents('a').remove();
            },
            cache: false,
            contentType: false,
            processData: false
         });
            return false;
        });
    });

     $('#onsentlist').submit(function () {
            var formData = new FormData($('#onsentlist')[0]);
            $('#res').append("<div id='alertshow' class='alert alert-info'><a href='#' class='close' data-dismiss='alert'>&times;</a><strong></strong>Loading,Please Wait...</div>");
            $.ajax({
                url: 'deletesentmsg.php',  //Server script to process data
                type: 'POST',
                data: formData,
                async: false,
                success: function (msg) {
                    $('#res').empty().append(msg);
                    alert('here');
                    $('form input:checked').parents('a').remove();
                },
                cache: false,
                contentType: false,
                processData: false
            });
            return false;
        });
    $('#refbut').click(function(){
        $('#reload').load('loadmsgs.php');
    });
    $('#sentbox').click(function(){
        $('#reload').load('loadsent.php');
        $('.nav li').removeClass('active');
        $('#onlist').attr('id','onsentlist');
        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
    });
    $('#inbox').click(function(){
        $('#reload').load('loadmsgs.php');
        $('.nav li').removeClass('active');
        $('#onsentlist').attr('id','onlist');
        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
    });

html:

<form method="post" id="onlist">
    <button type="submit" id="delbt" value="Submit" class="btn btn-warning">
        <span class="glyphicon glyphicon-trash"></span>   
    </button>
    <hr>
    <div id="reload" class="list-group">
        <?php require_once('load.php'); ?>
    </div>
</form>

Answer 1

1. 绑定(bind)发生在实际的 DOM 节点上。因此，更改它的特定属性/特性不会改变绑定(bind)在它上面的内容。
2. 你在两个处理程序中唯一改变的是 url，所以最好只使用一个脚本来根据条件选择 url

所以

$('#onlist').submit(function () {
    var formData = new FormData($('#onlist')[0]),
        actionUrl = $(this).data('action-url');

    $('#res').append("<div id='alertshow' class='alert alert-info'><a href='#' class='close' data-dismiss='alert'>&times;</a><strong></strong>Loading,Please Wait...</div>");

    $.ajax({
        url: actionUrl ,  //Server script to process data, using the dynamic URL we set
        type: 'POST',
        data: formData,
        async: false,
        success: function (msg) {
          $('#res').empty().append(msg);
          $('form input:checked').parents('a').remove();
        },
        cache: false,
        contentType: false,
        processData: false
     });
        return false;
    });
});


$('#sentbox, #inbox').click(function(){
    var url= $(this).data('action-url');

    $('#reload').load('loadsent.php');
    $('.nav li').removeClass('active');
    $('#onlist').data('action-url', url);
    var $parent = $(this).parent();
    if (!$parent.hasClass('active')) {
        $parent.addClass('active');
    }
});

并在 html 上为每个按钮添加属性 data-action-url="deletemsg.php" 和 data-action-url="deletesentmsg.php"分别..