jQuery - 如何动态创建提交输入点击

Question

我已经被这个问题困扰了很长时间，所以我不得不请求你的帮助。在我当前的项目中，我必须动态创建新的提交按钮，但问题是我无法按下按钮。这是我制作的演示。

HTML

<button id="AddButton">Add Input</button>
<br />
<br />
<div>
   <input type="submit" name="Button[]" id="Button-0" value="Button 0"> <br />
</div>

jQuery

var i = 0;

$('#AddButton').click(function() {
  ++i;
  var newInput = '<input type="submit" name="Button[]" id="Button-'+i+'" value="Button '+i+'"> <br />';
  $('div').append(newInput);
});


$('input').click(function() {
  var inputID = $(this).attr('id');
  alert(inputID); 
});

演示 http://jsfiddle.net/9pR87/71/

我做了简单的调试。每次输入按下都会发出警报，正如您所看到的，jquery 提交不会发出任何警报。

Answer 1

使用 on jQuery 函数。

此外，为附加按钮添加一个类。

$(document).on("click", ".myFavoriteClass", function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

JSFIDDLE

在 documentation我们发现这个:

.on( events [, selector ] [, data ], handler(eventObject) )

因此，我们将使用以下参数检测对 document 的点击:

• 事件:“点击”
• 选择器:“.myFavoriteClass”

直接和委托(delegate)事件

当提供选择器时，事件处理程序被称为委托(delegate)。当事件直接发生在绑定(bind)元素上时，不会调用处理程序，而是仅针对与选择器匹配的后代(内部元素)调用处理程序。 jQuery 将事件从事件目标冒泡到附加处理程序的元素(即，最内层到最外层元素)，并为沿该路径匹配选择器的任何元素运行处理程序。

事件处理程序仅绑定(bind)到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为了确保元素存在并且可以选择，请在文档就绪处理程序内为页面上 HTML 标记中的元素执行事件绑定(bind)。

如果新的 HTML 被注入(inject)到页面中，请在将新的 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托(delegate)事件附加事件处理程序，如下所述。

[了解更多关于 documentation page ]