Question

我制作了这个示例代码：https://jsfiddle.net/gwpcfp89/

问题是关于此点击事件：

var wrapper = $(".select-editable"); // Fields wrapper

$(wrapper).on('keypress', '#input1', function () {
  var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs);
  $('#mytext1').html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
});

我使用#input1，#mytext1，我希望点击是动态的。例如：如果我在表格中创建了四个选择，则第四个选择应该具有点击事件，如第一个选择（#input4和#mytext4）。

有可能吗？

Answer 1

I have modified you JSFiddle code - https://jsfiddle.net/pjf17exa/
As per your code, i have fixed some error and modified you code to make it dynamic input action.

// your code
var wrapper = $(".select-editable"); //Fields wrapper

$(wrapper).on('keypress', '#input1', function () {
var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs);
  $('#mytext1').html('<option value="dummy01">dummy01</option><option 
  value="dummy02">dummy02</option><option 
  value="dummy03">dummy03</option>')
});

-- which assigns event for the current row, not for the dynamic elements. So instead take parent element and assign event for the input. Where you can access current element using $(this) instance inside the function. 

// do like this
var wrapper = $("#table-editable");
wrapper.on('keypress', 'input', function () {
  var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs, $(this));
   $(this).prev().html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
});

Answer 2

你可以在这里做一个技巧。

创建动态选择标记时，将一个属性添加到它们中，如：New

所以这里应该是您附加到data-bind="<values>"以生成input4

的动态数字

然后编写一个jquery函数，比如在这里：

id

这应该是你的解决方案。

Answer 3

您的代码存在一些问题：

您分配给data+=的字符串使用双引号而不是单引号的某些HTML属性，因此导致代码中断。
您正在动态创建具有相同ID的输入字段。 ID属性在页面上应始终是唯一的。为了解决这个问题，我使用i+1变量在输入ID中附加了一个唯一的数字。既然ID是唯一的，我必须将$("#students").on('keypress', '#input1', function () {更改为$("#students").on('keypress', 'input', function () {，以便按标签名称选择元素。
此$(wrapper).on('keypress', 'input', function () {使用.select-editable作为事件处理程序，但.select-editable是动态生成的。事件处理程序必须是包含所有将动态生成的元素的元素，而不是动态生成的元素的一部分。所以我改变了代码的一部分来改为使用#students。

我希望这有助于解释问题所在。

https://jsfiddle.net/gwpcfp89/6/

在动态创建的select上添加click事件

3 个答案: