javascript - 迭代使用时，JQuery on Change 事件不会触发

Question

我有一大堆动态生成的选择框，当这些选择框中的某些值发生更改时，就会执行一些 X 操作。但是 .on 更改功能无法按预期工作。这是我的代码片段。

$(document).ready(function() {
  //$("body").on( 'change',$("#pipeline_stages2"),select_pipeline_stage );
  for (var i = 1; i < 100; i++) {
    console.log("Calling the select_pipeline_stage function");
    $("body").on('change',"#pipeline_stages" + String(i) ,select_pipeline_stage(i));
  };
});

注释的代码有效，但在迭代时无效。

这是被调用函数的片段。

function select_pipeline_stage(i){
  var data = $('#' + $('#pipeline_stages' +String(i)+" "+ 'option:selected').val()).html();
  console.log($('#pipeline_stages' + String(i) + " " + 'option:selected').val());
  console.log("Transferred the html from the corresponding div");
  $('#stage'+String(i) +'_pipeline').html(data);
}

Answer 1

让我尝试一种完全不同的方法。

1. 将class添加到每个select(比方说pipeline_stages)。
2. 添加带有相关索引的 data- 属性(假设为 stage)。
3. 使用单个选择器 .pipeline_stages 监听所有选择。
4. 通过 data-stage 属性获取索引，并通过 find 函数获取 html 索引。
5. 使用它。

$(document).ready(function() {
  $("body").on('change',".pipeline_stages", function() {
    var elm = $(this),
        i = elm.attr('data-stage'),
        data = elm.find('option:selected').html();

    select_pipeline_stage(i, data);
  });
});

function select_pipeline_stage(i, data) {
  $('#stage' + i + '_pipeline').html(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="#pipeline_stages1" class="pipeline_stages" data-stage="1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select id="#pipeline_stages2" class="pipeline_stages" data-stage="2">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select id="#pipeline_stages3" class="pipeline_stages" data-stage="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<hr />
<div id="stage1_pipeline"></div>
<div id="stage2_pipeline"></div>
<div id="stage3_pipeline"></div>