jQuery .change работает только для первого экземпляра

Question

У меня есть серия условных элементов выбора, которая использует .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); 

}); 

}); 

Research предложил мне использовать .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 ***/ 
}); 

Answer 2

Попробуйте делегировать события, если ваш .load изменяет html страницы и заменяет исходные selectboxes, тогда события, связанные с ними, становятся несвязанными.

Если вы пытаетесь сделать что-то вроде:

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

и тот же для всех событий изменения, которые вы являются обязательными для selectboxes.

Answer 3

использование change, как показано ниже.

$('#autocad-level-1').on('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); 

    }); 

Answer 4

Изменить

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

в

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

ТАКЖЕ

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

Изменить на:

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