从附加的元素调用javascript

Calling javascript from appended elements

本文关键字：调用 javascript 元素      更新时间：2023-09-26

只想在这里弄清楚一个概念。

假设我有这个html页面：

        <script>
        function_1()
           {
          ... posts a form via ajax
           };
        </script>

<body>
<div class='car'>
</div>
</body>

在一个事件上，我将prepend()这个表单（我通过ajax获得）发送到上面的<div class='car'>

<form method='post'>
...
<button type='submit' value='post' />
</form>

其想法是通过ajax提交此表单，方法是在按下提交按钮时调用function_1函数。

这行得通吗？因为当我提交表单时，它并没有调用function_1，而是通过常规的Httppost发布。

当我们将append()或prepend()元素添加到DOM时，它们是否可以立即访问javascript？

感谢

您在运行时附加这些表单元素，因此必须使用event-delegation为其注册事件。顺便说一句，它是一个提交按钮，所以每当你点击它时，它就会简单地调用它的默认操作，即提交表单。所以你应该使用e.preventDefault()来防止它的默认行为，或者你需要将该按钮的类型从submit更改为button

试试，

<script>
$(document).ready(function(){
          function function_1()
           {
              ... posts a form via ajax
           };
          $(document).on("click", "input[type='submit']", function(e) {
               e.preventDefault();
               function_1()
          });
});      
</script>

您需要使用委托的事件处理程序，例如：

$(document).on("submit", "#your-form-id", function(e) {
  e.preventDefault();
  // AJAX code
});

然后，只要表单存在，无论何时附加表单，都将在提交时调用处理程序。

相关文章：