Javascript 代码在 while 循环中不起作用

Question

我正在尝试使用 ajax 提交表单，但该表单实际上在表格中。我制作了一个表格，其中的行由 while 循环填充 + 单击时每行要提交的按钮，但是当我单击按钮时没有任何反应。知道为什么吗？这是我的代码。另外，提交该表格的方式是否正确？我的意思是为每个表单生成 JS 代码。

编辑:即使将该功能更改为简单的。单击一个然后提醒它什么也不做。看起来它根本没有被执行

while($row = $stmt->fetch())
{ $x++;
    echo '<tr>
    <form id="lululu-'. $x .'" method="post">
    <td>'. $x .'</td>
    <td><label>' .$row["WebName"] . '</label></td>
    <input type="hidden" name="clothes" value="'.$row["clothes"] .'"/>
    <input type="hidden" name="pieces" value="'.$row["pieces"] .'"/>
    <input type="hidden" name="userId" value="'.$row["userId"] .'"/>
    <td><img src="/img/knownitem.png" alt="Not found" /></td>
    <td><label>'.$row["gear"] .'</label></td>
    <td><label>1</label></td>
    <td><label>2</label></td>
    <td><label>3</label></td>
    <td><select name="selltype">
        <option value="1" name="1">1</option>
        <option value="0" name="0">0</option>
    </select></td>
    <td><input type="number" name="cost" min="1" style="width: 50px;" value="1"/></td>
    <td><input type="text" name="test"/></td>
    <td><input type="submit" name="submit" class="btn btn-primary btn-block" value="GetIn" /></td>
    </form></tr> 
    <script type="text/javascript">
    jQuery("#lululu-' . $x . '").submit(function (e) {
        e.preventDefault();
        $.ajax({
               type: "POST",
               url: "/duuh/test.php/",
               data: $("#lululu-'. $x .'").serialize(),
               success: function(data)
               {
    alert("success");
               }
             });
        });
    </script>
    ';
}
echo '  </table>
    </div>';

提前致谢。

Answer 1

只需从循环中删除 javascript 代码部分，只需使用循环外的下一段代码

<script type="text/javascript">
    jQuery("form[id^='lululu-']").submit(function (e) {
        e.preventDefault();
        $.ajax({
             type: "POST",
             url: "/duuh/test.php/",
             data: $(this).serialize(),
             success: function(data)
               {
                  alert("success");
               }
        });
    });
</script>

form[id^='lululu-'] - 选择 id 以 lululu- 开头的表单

$(this) - 引用此表单

个人:我更喜欢

1- 使用 $(document).ready(function(){//code here })

中的 js 代码

2- 使用 .on('submit' , function(){}) 而不是使用 submit(function(){})

作为@incrediblehat评论中说 也可以通过向所有表单类添加一个类来实现 class="lulu-form"并匹配它:$(".lulu-form").submit...。无论哪种方式都有效