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

让我的目的是一种完全不同的方法。

将class添加到每个select（假设为pipeline_stages）。
使用相关索引添加data-属性（假设为stage）。
使用单个选择器.pipeline_stages收听所有选择。
按data-stage属性和html按find功能获取索引。
使用它。

$(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>

迭代使用时，JQuery on change事件不会触发

1 个答案: