javascript - jQuery .change 仅适用于第一个实例

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我有一系列使用 .load 的条件选择元素从外部文件插入动态内容。问题是它仅针对第一个元素触发，任何后续实例都不会导致任何操作。

我从这个开始:

jQuery(document).ready(function($) {


$('#autocad-level-1').change(function() {

    var cat_id = $(this).val();
    console.log('Category Selected');
    $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

});

$('#autocad-level-2').change(function() {

    var p_id = $(this).val();
    console.log('Product Selected');
    $('#autocad-level-3-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-3.php?p_id='+p_id);

});

});

研究建议我应该使用.on作为事件处理程序，但我也没有成功。

jQuery(document).ready(function($) {

$('#autocad-level-1').on("change", "select", function() {

    var cat_id = $(this).val();
    console.log('Category Selected');
    $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

});

$('#autocad-level-2').on("change", "select", function() {

    var p_id = $(this).val();
    console.log('Product Selected');
    $('#autocad-level-3-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-3.php?p_id='+p_id);

});

});

这是我的 HTML:

<div id="autocad-level-1-container">
    <select id="autocad-level-1" name="autocad-level-1">
      <option value="0">Select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      ...
    </select>
</div>
<div id="autocad-level-2-container"></div>
<div id="autocad-level-3-container"></div>

我在这里做错了什么？我没有主意了。

Answer 1

您需要监听父元素的选择，而不是选择本身。

$('#autocad-level-2-container').on("change", "#autocad-level-2", function() { 
    /*** code here ***/
});