时间戳

首页 > 解决方案 > 在循环中更改侦听器 - 只有第一个有效

javascript - 在循环中更改侦听器 - 只有第一个有效

问题描述

我已经构建了一个表单，其中有一个“添加行”按钮可以添加另一行输入（如果用户需要它）。

然而，在这一行有一个select需要change处理程序的输入。所以我所做的是，每次单击添加新行的按钮时，每个select输入（具有相同的name属性）都被赋予一个独特的id像这样

let creditorInputs = $('select[name="creditors"]');
console.log(creditorInputs);

creditorInputs.map(i => {
$(creditorInputs[i]).attr('id', `creditorSelect${i}`);

这给了他们一个“creditorSelect0，creditorSelect1”等的ID

但是在循环的下方，我添加了一个change侦听器，当我单击选择输入并更改其值时，它似乎只影响页面上的第一个。

这是完整的脚本：

$('#addrowothermort').click(() => {
    let creditorInputs = $('select[name="creditors"]');
    console.log(creditorInputs);

    creditorInputs.map(i => {
        $(creditorInputs[i]).attr('id', `creditorSelect${i}`);

        $(`#creditorSelect${i}`).change(() => {
    
            console.log("Changed");
            
        });

    });
});

编辑：

$('#tabs-6').click(event => {
        event.preventDefault();
        
        if(event.target.name == 'creditors') {
            let rightInput = event.target;
            
            rightInput.addEventListener('change', () => {
                console.log(rightInput.value);
            })
        }
    })

标签： javascripthtmljqueryevents

解决方案

将事件嵌入到循环中的每个选择将再次附加事件，

所以无论是在循环外使用事件委托，还是将事件附加到没有循环的dreclyt创建的输入，

建议稍微改变逻辑，创建创建输入并将点击嵌入其中的函数，然后计算创建者输入的数量并根据输入数量设置新创建的 id。

见下面的片段：

var arr = [{
    val: 1,
    text: 'One'
  },
  {
    val: 2,
    text: 'Two'
  },
  {
    val: 3,
    text: 'Three'
  }
];

function createSelect(arr) {
  var select = $('<select>').appendTo('#container');
  $(arr).each(function() {
    select.append($("<option>").attr('value', this.val).text(this.text));
  });
  return select;
}
$('#addrowothermort').click(() => {

  let $select = createSelect(arr);

  $select.attr("name", "creditors");
  let selectLength = $('select[name="creditors"]').length - 1 | 0;

  $select.attr("name", "creditors");
  $select.attr("id", selectLength);

  $select.on("change", function() {

    console.log("Change in ", $(this).attr("id"));

  });


});
select {
  margin: 5px 20px 0px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addrowothermort">add row </button>


<div id="container"></div>

推荐阅读