Question

我在1个文件中有以下代码：

<script type="text/javascript">
  $(document).ready(function() {
    $("#add-button").click(function() {
      $.post("/test_data", $("#form-data").serialize(), function(data) {
        alert(data);
      });
    });
  });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('a').click(function() {
      $('#Table tbody').append('<tr> <form action="/test_data" method="post" id="form-data"> \
                                     <td> <input type="text" name="name"> </td> \
                                     <td> <input type="text" name="address"> </td> \
                                     <td> <input type="text" name="phone"> </td> \
                                     <td> <button type="button" id="add-button"> add data </button> </td> \
                                     </form> \
                                </tr>');
    });
  });
</script>

我在这里尝试做的是动态地向表中添加一行。该行应该有一个＆＃34;添加数据＆＃34;按钮，单击时将表单的字段作为post方法发送到名为/ test_data的URL。

如果我将表单移动到我的html的主体中，这非常好用。如果我把它留在脚本中通过按钮点击添加行，它什么都不做。我在这里遗漏了一些东西来做这项工作吗？

谢谢。

Answer 1

它不起作用，因为事件未绑定在新添加的按钮

上

<script type="text/javascript">
  $(document).ready(function() {

    $('a').click(function() {
        $('#Table tbody').append('<tr> <form action="/test_data" method="post" id="form-data"> \
                                     <td> <input type="text" name="name"> </td> \
                                     <td> <input type="text" name="address"> </td> \
                                     <td> <input type="text" name="phone"> </td> \
                                     <td> <button type="button" id="add-button"> add data </button> </td> \
                                     </form> \
                                </tr>');
        $("#add-button").off('click').on('click',function() {
          $.post("/test_data", $("#form-data").serialize(), function(data) {
            alert(data);
          });
        });
    });

  });
</script>

Answer 2

$("#add-button").click(...)将点击处理程序绑定到当时存在的第一个id="add-button"元素，而不是将来创建的元素。您可以使用带有选择器的.on()作为其第二个参数来创建委托的单击处理程序，该处理程序甚至适用于将来动态创建的元素。

此外，如果锚点在每次单击时向表中添加一行，那么您将创建每行中具有重复ID的元素，这是无效的HTML。因此，您应该为这些动态元素使用类而不是ID。

最后，按钮点击处理程序应该使用this和DOM导航方法来查找自己的表单元素，因为可以创建多个表单。（如果你这样做，表单元素本身并不需要ID或类来识别它。）

把它们放在一起：

<script type="text/javascript">
  $(document).ready(function() {
    $("#Table").on("click", ".add-button", function() {
      $.post("/test_data", $(this).closest("form").serialize(), function(data) {
        alert(data);
      });
    });

    $('a').click(function() {
      $('#Table tbody').append('<tr> <form action="/test_data" method="post"> \
                                     <td> <input type="text" name="name"> </td> \
                                     <td> <input type="text" name="address"> </td> \
                                     <td> <input type="text" name="phone"> </td> \
                                     <td> <button type="button" class="add-button"> add data </button> </td> \
                                     </form> \
                                </tr>');
    });
  });
</script>

（另请注意，在单独的脚本元素中不需要两个单独的文档就绪处理程序，您可以将它们合并为一个。）

多个jquery函数未按预期工作

2 个答案: