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

【问题标题】：change id of a form with jQuery but jQuery uses the old attributes to recognize it使用 jQuery 更改表单的 id 但 jQuery 使用旧属性来识别它
【发布时间】：2015-02-25 22:54:49
【问题描述】：

我有一个表单，它的内容每次都会改变（例如收件箱和发件箱项目）。我想改变表单提交按钮的作用。我是这样做的：

首先，当我改变地点时，我重命名了通过 ajax 请求提交的表单 ID。($('#onlist').submit(function ())
最后我根据新的表单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>

【问题讨论】：

如果您重命名 ID，我认为您误解了 ID 的概念。也许您想要 title 或自定义 data 属性。

标签： javascript jquery html ajax forms

【解决方案1】：

绑定发生在实际的 DOM 节点上。因此，更改它的特定属性/属性不会改变其绑定的内容。
您在两个处理程序中唯一更改的是 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"..

【讨论】：

【解决方案2】：

因为更改元素的 id 并不会神奇地删除附加到元素的事件。

您需要取消绑定事件。

其次当你将事件绑定到一个不存在的元素时，它不会绑定任何东西。它不会动态地将自己附加到更新的元素上。

您需要更改它，以便在一个提交函数中提交和未提交的逻辑。或者您可以在更改 id 时绑定第二个函数。或者您可以使用事件委托进行提交。

【讨论】：

【解决方案3】：

首先，您应该重新考虑您的方法... ID 是唯一标识符，您根本不需要更改它...但是继续...

你分配事件函数的方式

$('#onlist').submit(function () {

将侦听器附加到元素本身，而不是目标 id...为了在运行时查找 Id，您需要使用事件委托，以前面的元素为目标，例如 document：

  $(document).on("submit", "#onsentlist", function () { ...

  $(document).on("submit", "#onlist", function () { ...

【讨论】：