Re-apply event bindings after jQuery.load()

Question

Unfortunately I can't create a jsFiddle because this requires a valid URL returning HTML but the point is I'm using an input mask , which stops working after execution of $.load() I think it's me just not understanding this function very well.

script:

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

I've tried to make $.load() callback the setupInputMasks this way but it won't. How can I re-apply event bindings after jQuery.load()?

Following the fortunes of `this` is giving me brain strain. – Beetroot-Beetroot Mar 21 '13 at 12:21 — Beetroot-Beetroot, Mar 21 '13 at 12:21

bumerang · Answer 1 · 2013-03-21T16:02:14.883

0

When You call this.setupInputMasks); it's this in current function not a class. Yuo should put some other variable ie: self and put this in.

An Explonation in Your code:

//...
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
    };
// ...

It sholud help You. You can also use jQuery solution, function proxy.

More is here: http://api.jquery.com/jQuery.proxy/

edited Mar 21 '13 at 16:02

answered Mar 21 '13 at 12:41

bumerang

1,776
21
30

thanks. it doesn't appear to be loading the html returned from server because of the callback function. If I move `self.setupInputMasks` out of the `$('#hpiLookupContainer').load()`, it won't be called. – Ruslan Mar 21 '13 at 15:45
@Chuck - try the code now, I've update: `self.setupInputMasks` to `function(){self.setupInputMasks}`. This should help. – bumerang Mar 21 '13 at 16:03
doesn't work dude. `self` is a button and setupInputMasks is `undefined`. i've tried moving `var self = this;` out of the function and then it becomes a `Window`, which is also wrong. Why isn't it as simple as this: http://stackoverflow.com/questions/8778874 – Ruslan Mar 21 '13 at 16:12
Your welcom. Glad that You have found the solution. – bumerang Mar 21 '13 at 16:34

score 0 · Accepted Answer · answered Mar 21 '13 at 16:20

0

here's the solution:

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

answered Mar 21 '13 at 16:20

Ruslan

9,927
15
55
89

Re-apply event bindings after jQuery.load()

2 Answers2