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);

});

});

研究建议我应该使用.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

尝试委派事件，如果.load更改页面的html并替换原始选择框，则绑定到它们的事件将被解除绑定。

如果您尝试执行以下操作：

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

对于您在选择框上绑定的所有更改事件都是相同的。

Answer 2

您需要从父元素中侦听选择，而不是选择本身。

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

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

ALSO

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

更改为：

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

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

4 个答案: