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的点击次数：

events：“点击”
selector：“。myFavoriteClass”

直接和委派活动

当提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

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

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

[详情请见documentation page]

Answer 2

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

您需要将on用于动态生成的元素，以便在它们上绑定事件。

See this updated fiddle

Answer 3

您应该使用以下内容：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('div').on('click', 'input[type="submit"]', function(event) {
    event.preventDefault();
    var inputID = this.id;
    alert(inputID); 
});

这会将您的事件附加到div元素中的任何输入，减少必须检查整个document元素树并提高效率的范围。

FIDDLE DEMO

Answer 4

您需要动态生成元素的事件委派

$(document).on('click','input:submit',function() {
   var inputID = $(this).attr('id');
   console.log(inputID); 
});

演示--> http://jsfiddle.net/9pR87/76/

Answer 5

把这个：

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

在$('#AddButton').click(function()函数内，最后。像这样：

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);
  });
});

Answer 6

您可以使用on：

 $("#Button-" + i).on("click", function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

这将为您的按钮附加一个新的click事件处理程序。

http://jsfiddle.net/9pR87/78/

您可能希望使用一个可以附加$(input).click的功能以及$("#Button-" + i)

你也可以使用bind但{j} 1.7是on的优先方法

Answer 7

首先为您正在创建的所有按钮分配一个类，而不是为它们分配相同的ID。其次，使用jquery .on()函数将click事件绑定到按钮。

Answer 8

对我来说很好

只需将类添加到输入字段

<input type="text" class="actionClass" id="my_id1"/>
<input type="text" class="actionClass" id="my_id2"/>

然后jquery代码应该是这样的

$('.actionClass').bind('click',function(event){
    console.log('clicked: id ='+this.id);
});

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

8 个答案:

直接和委派活动