在 jQuery.load() 之后重新应用事件绑定答案

【问题标题】：Re-apply event bindings after jQuery.load()在 jQuery.load() 之后重新应用事件绑定
【发布时间】：2023-03-07 07:52:01
【问题描述】：

不幸的是，我无法创建 jsFiddle，因为这需要返回 HTML 的有效 URL，但关键是我正在使用输入掩码，它在执行 $.load() 后停止工作我认为是我对这个功能不太了解。

脚本：

(function () {
    isa.uk.HpiLookup = (function () {
        function HpiLookup() { }
        HpiLookup.prototype.setupEventHandlers = function () {
            return $('#hpiLookupContainer').on("click", "#vehicleRegistrationSearchButton", this.onVehicleRegistrationSearchButton);
        };

        HpiLookup.prototype.setupInputMasks = function () {
            $('#VehicleRegistrationNumber').inputmask("#######", { "placeholder": "" });
        };

        HpiLookup.prototype.onVehicleRegistrationSearchButton = function (event) {
            event.preventDefault();
            return $('#hpiLookupContainer').load(
                GetVehicleByRegistrationNumberUrl,
                {
                    VehicleRegistrationNumber: $('#VehicleRegistrationNumber').val()
                },
                this.setupInputMasks);
        };

        return HpiLookup;

    })();
}).call(this);

Index.cshtml：

<div id="hpiLookupContainer">
    <input id="VehicleRegistrationNumber" type="text">
    <button id="vehicleRegistrationSearchButton" type="button">Search</button>
</div>

<script type="text/javascript">
    var GetVehicleByRegistrationNumberUrl = '@Url.Action("GetVehicleByRegistrationNumber", "Vehicle")';
    var hpiLookup = new isa.uk.HpiLookup();
    hpiLookup.setupEventHandlers();
    hpiLookup.setupInputMasks();
</script>

我尝试以这种方式使 $.load() 回调 setupInputMasks，但它不会。 如何在jQuery.load() 之后重新应用事件绑定？

【问题讨论】：

追随this 的命运让我脑筋急转弯。

标签： jquery

【解决方案1】：

当您调用this.setupInputMasks); 时，当前函数中的this 不是类。 Yuo 应该放入一些其他变量，即：self 并放入 this。

您的代码中的一个探索：

//...
HpiLookup.prototype.onVehicleRegistrationSearchButton = function (event) {
        event.preventDefault();
        var self = this; // Now You put this (from a class) into another variable
        return $('#hpiLookupContainer').load(
            GetVehicleByRegistrationNumberUrl,
            {
                VehicleRegistrationNumber: $('#VehicleRegistrationNumber').val()
            },
            function(){self.setupInputMasks}); // now You call class this
    };
// ...

它应该帮助你。也可以使用jQuery解决方案，函数代理。

更多信息在这里：http://api.jquery.com/jQuery.proxy/

【讨论】：

谢谢。由于回调函数，它似乎没有加载从服务器返回的 html。如果我将self.setupInputMasks 移出$('#hpiLookupContainer').load()，它将不会被调用。
@Chuck - 现在试试代码，我已经更新：self.setupInputMasks 到 function(){self.setupInputMasks}。这应该会有所帮助。
不起作用，伙计。 self 是一个按钮，setupInputMasks 是 undefined。我尝试将var self = this; 移出函数，然后它变成Window，这也是错误的。为什么不这么简单：stackoverflow.com/questions/8778874
欢迎您。很高兴您找到了解决方案。

【解决方案2】：

解决办法如下：

return $('#hpiLookupContainer').load(
    GetVehicleByRegistrationNumberUrl,
    {
        VehicleRegistrationNumber: $('#VehicleRegistrationNumber').val()
    },
    hpiLookup.setupInputMasks
);

【讨论】：