使用多个行但保留元素 ID 时重新加载 Div

Question

我在数据库中有一组记录，并将它们列成行。每一行都必须是唯一的元素id，所以我实现了如下，这是在主循环内部。#right<?php echo $row['Id']; ?>    {     display: inline-block;    width:250px;     float:left;    text-align: left;      height:auto;       font-family:Arial;          font-size: 12px;     text-decoration: none;  }因此，每条记录都有自己的 css，如上所述。我在每行上都有一个提交表单按钮，它也使用唯一的，所以每个表单都有自己的名称。<?php echo $row['Id']; ?>我提交表单并使用ajax重新加载当前的div，以便它随着行状态的变化而改变颜色。我遇到的问题是，一旦我提交了一次此表单，它将不再提交第二次而不加载整个页面，我假设这与元素id有关？这是阿贾克斯    <script>        $(document).ready(function() {            $("#submit<?php echo $row['Id']; ?>").submit(function() {                     var frm = $('#submit<?php echo $row['Id']; ?>');                     $.ajax({                         type: frm.attr('method'),                         url: 'Update.php',                         data: frm.serialize(),                         success: function (data) {                             $('#right<?php echo $row['Id']?>').load(' #right<?php echo $row['Id']?> ',function(){                             $("#image<?php echo $row['Id']; ?>").show(); }                                 ) ;                   }, error: function(jqXHR, textStatus, errorThrown){                  console.log(" The following error occured: "+ textStatus, errorThrown );                } });               return false;            });        });    </script>这似乎完全工作正常，我第一次提交div重新加载并按预期，当你第二次点击它时。我这样做是完全错误的方式吗？我知道我可以在重新加载的divs之外执行提交按钮，然后它继续工作，但想重新加载整个div，以便我可以将按钮更改为其他选项等。任何帮助将不胜感激。这是 html/php<div id="right<?php echo $row['Id']; ?>"><form id="submit<?php echo $row['Id']; ?>" method="post" autocomplete="off"><input type="hidden" value="<?php echo $row['Id']?>" name="id"> <input class="input-2" type="text" name="returnid"  value="<?php echo $row['returnID']; ?>"><input type="submit" name="submit-form" class="buttonSubmitHide" /></form></div>

Answer 1

您编写的代码不会在处理后隐藏元素。#loading

如果可能的话，我需要首先看到你的html代码，如果它不可能，所以你需要在你的过程完成后隐藏你的元素，之后你将能够再次显示它。#loading

当加载没有隐藏并且只是显示时，您的代码在第一时间如何正常工作？

如果它将在加载后被删除，那么您也需要加载元素。#loading

Answer 2

在每行上放置一个类并删除 id。利用获取与类匹配的所有元素的功能，并将事件挂接到与类匹配的每个元素。然后在函数中使用以获取行，并从那里导航到子项。$(this).parent()

这只是一种改进代码的策略，而不是具体的答案，但是如果您遵循此方法，则可能更容易推断出错误所在。

$(document).ready(function() {

  $(".js-action").submit(function() {

    var row = $(this).parent('.row');

    $.ajax({

       type: $(this).attr('method'),

       url: 'Update.php',

       data: $(this).serialize(),

       success: function (data) {

           row.find('.response-image').show(); 

       },

       error: function(jqXHR, textStatus, errorThrown){

           console.log("The following error occured: "+textStatus,errorThrown);

       } 

    });

});

<!-- this gets repeated a bunch of times. No need for ids -->

<div class="row">

    <form class="response" method="post" autocomplete="off">

        <input type="hidden" value="<?php echo $row['Id']?>" name="id"> 

        <input class="input-2" type="text" name="returnid"  value="<?php echo $row['returnID']; ?>">

        <input type="submit" name="submit-form" class="buttonSubmitHide" />

    </form>

</div>