jQuery Ajax 多次加载 URL，如何正确取消绑定(bind)/重新绑定(bind)？

Question

我通过 Ajax(品牌列表)加载一个 SELECT 元素，获取其选定值(品牌 ID)，然后通过另一个 Ajax URL(当前选定品牌的模板列表)加载另一个 SELECT。

这是我的代码:

$(document).ready( function() {


    // DO NOT cache Ajax calls
    $.ajaxSetup ({ cache: false });

    // loader
    var ajax_load = "Loading...";

    //  Brands List URL
    var loadBrandUrl = "getBrandsList.php";
    //  Templates List URL
    var loadTemplateUrl = "getTemplatesList.php";

    $("#brandslistSelect").html(ajax_load).load(loadBrandUrl)
        .ajaxComplete(function(){  // Brands select loaded

        /* Load Templates SELECT the first time since no .change() has happened */
            var selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
            console.log(selectedBrand);  // Log selected brand to console
            // get Templates select, commented for now since it does an infinite loop
            // $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } );
        /* End initial load template */

        /* On interaction with the Brands SELECT */
        $("#brandslistSelect").change(function () {  // on interaction with select

            selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
            // get Templates SELECT
            $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } )
        });
        /* End interaction with the Brands SELECT */

    });


});

它在控制台中返回 selectedBrand 3 次:
所选品牌 = 未定义
所选品牌 = 未定义
所选品牌 = 101

现在，如果我取消注释以下行，输出与上面相同，但它还会无限期地加载模板 URL:

// $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } );

<小时/>

知道如何修改此代码以使其按预期工作吗？

感谢 stackOverflow 社区的帮助!

Answer 1

如果将函数作为 .load() 的第二个参数传递，是否会得到相同的效果？听起来好像由于某种原因，在 HTML 加载完成之前就调用了 log 代码，这就是它找不到 select 的原因。它几乎“感觉”就像每次下载数据 block 时都会调用 ajaxComplete() ，而不是在整个过程之后调用。

$("#brandslistSelect").html(ajax_load);
$("#brandslistSelect").load(loadBrandUrl, function(){  // Brands select loaded

    /* Load Templates SELECT the first time since no .change() has happened */
        var selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
        console.log(selectedBrand);  // Log selected brand to console
        // get Templates select, commented for now since it does an infinite loop
        // $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } );
    /* End initial load template */

    /* On interaction with the Brands SELECT */
    $("#brandslistSelect").change(function () {  
        // on interaction with select
        selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
        // get Templates SELECT
        $("#templateslistSelect").html(ajax_load);
        $("#templateslistSelect").load(loadTemplateUrl, { BrandId: selectedBrand } );
    });
    /* End interaction with the Brands SELECT */

})