使用多个行但保留元素 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() {&nbsp; $(".js-action").submit(function() {&nbsp; &nbsp; var row = $(this).parent('.row');&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp;type: $(this).attr('method'),&nbsp; &nbsp; &nbsp; &nbsp;url: 'Update.php',&nbsp; &nbsp; &nbsp; &nbsp;data: $(this).serialize(),&nbsp; &nbsp; &nbsp; &nbsp;success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;row.find('.response-image').show();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp;error: function(jqXHR, textStatus, errorThrown){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("The following error occured: "+textStatus,errorThrown);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp;&nbsp; &nbsp; });});<!-- this gets repeated a bunch of times. No need for ids --><div class="row">&nbsp; &nbsp; <form class="response" method="post" autocomplete="off">&nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" value="<?php echo $row['Id']?>" name="id">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input class="input-2" type="text" name="returnid"&nbsp; value="<?php echo $row['returnID']; ?>">&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" name="submit-form" class="buttonSubmitHide" />&nbsp; &nbsp; </form></div>