1

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

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 进行提交不会发出任何警报。

4

8 回答 8

4

使用onjQuery 函数。

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

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

JSFIDDLE

在文档中，我们发现：

.on（事件 [，选择器] [，数据]，处理程序（事件对象））

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

  • events： “点击”
  • selector： “。我最喜欢的课程”

直接和委托事件

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

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

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

[在文档页面上阅读更多内容]

于 2013-05-22T11:00:36.920 回答
2 
$(document).on('click', 'input', function() {
    var inputID = $(this).attr('id');
    alert(inputID); 
});

您需要使用on动态生成的元素才能在它们上绑定事件。

看到这个更新的小提琴

于 2013-05-22T10:59:05.693 回答
2

您应该使用以下内容：

// 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元素树的范围并提高效率。

小提琴演示

于 2013-05-22T11:02:07.233 回答
2

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

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

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

于 2013-05-22T11:02:11.327 回答
2

把这个：

$('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);
  });
});
于 2013-05-22T11:04:18.680 回答
1

您可以使用on：

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

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

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

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

bind但是，您也可以使用on从 jQuery 1.7 开始的首选方法

于 2013-05-22T10:58:55.237 回答
0

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

于 2013-05-22T11:00:47.350 回答
0

对我来说很好

只需像这样将类添加到输入字段

<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);
});
于 2013-10-30T10:30:35.593 回答