Javascript Can'；t防止在动态插入时提交<；按钮>；进入DOM，这是表单的一部分

我有一个非常奇怪的问题，看起来很基本，但我无法让它工作。 我无法阻止按钮的submit事件，它被动态地插入到div中，div也是表单的一部分

加价

 <form>
   ...
   <div class="dynamically-inserted">
     <button class="copy-inquiry">Copy</button>
   </div>
   ...
   <button id="submit-form" type="submit">Submit</button>
 </form>

单击表单提交，并且不会打印

控制台.log（“单击按钮”）

。如果我添加

type=“button

，则表单不会提交，但仍然不会发生任何事情

---

谢谢您的检查。

您必须向表单提供

id='frm'

请进一步解释

Html

---

希望这有帮助

修复显然非常简单。像这样将

正文

更改为

文档

 $( "document" ).on( "click", ".copy-inquiry", function(e) {
   e.preventDefault();
   console.log("button clicked");
 });

---

JSFiddle

---

您也可以使用

标记来代替

，这很有帮助，但问题是除了
之外，我还插入了一些其他按钮，如
。如何知道哪个按钮触发了它，以便我可以为每个按钮执行不同的操作？提交仅由提交按钮触发在我的示例中，每个button正在触发提交。已解决。必须将
正文
更改为
文档
。
<form id="frm">
  <button type="submit" class="btn1">ss1</button>
  <button type="submit" class="btn2">ss2</button>
  <button type="submit" class="btn3">ss3</button>
</form>

$(document).ready(function() {
  $("#frm").submit(function(e) {
    e.preventDefault();
    var val=$(this).find("button[type=submit]:focus").attr("class");/* this selects the class of button which trigger submit event */
    alert(val)
  });
});

 $( "document" ).on( "click", ".copy-inquiry", function(e) {
   e.preventDefault();
   console.log("button clicked");
 });