黄兵的个人博客

jQuery bind() 动态绑定无效解决方案

最近帮朋友写一个商城，在使用 jQuery .ajax() 动态生成内容时候，使用 .bind() 绑定，点击却无效。

👇是示例代码：

function checkoutAreaBox1IdAttr() {
    // checkout 页面用户选择送货地址动作
    $("#province_boxIdAttr .group_item").bind("click", function () {
        const csrfToken = $('meta[name=csrf-token]').attr('content');
        let getProvinceId = $(this).attr("pid");
        $.ajax({
            url: "/api/v1/get_city",
            type: "POST",
            dataType: "json",
            data: {"code": getProvinceId},
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrfToken)
                }
            },
            success: function (data) {
                console.log(data);
            },
        })
    })
}

其中 .group_item 是动态生成的元素，使用 .bind() 点击无效。

解决方案：

我们可以使用 jQuery 的 .delegate()，下面是关于 .delegate() 的解释：

为所有匹配选择器（selector 参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

修改之后的代码如下：

function checkoutAreaBox1IdAttr() {
    // checkout 页面用户选择送货地址动作
    $("#city_boxIdAttr").delegate(".group_item","click", function () {
        const csrfToken = $('meta[name=csrf-token]').attr('content');
        let getProvinceId = $(this).attr("pid");
        $.ajax({
            url: "/api/v1/get_city",
            type: "POST",
            dataType: "json",
            data: {"code": getProvinceId},
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrfToken)
                }
            },
            success: function (data) {
                console.log(data);
            },
        })
    })
}

通过👆的修改，就可以动态绑定生成的内容，程序就可以正常运行了。

参考资料：

1、jQuery .delegate()

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - jQuery bind() 动态绑定无效解决方案