Use . on() instead of . bind() in Cakephp’s Jshelper

Question

When I write Ajax with Cakephp’s Jshelper, I write something like this

$this->Js->get('#searchCity')->event(
        'click', $this->Js->request(
                'http://api.geonames.org/searchJSON', array(
            'async' => true,
            'dataExpression' => true,
            'method' => 'GET',
            'data' => "{}",
            'dataType' => 'JSON',
            'success' => ""
                )
        )
);

the output is more or less like this

$(document).ready(function() {
    $("#searchCity").bind("click", function(event) {
        $.ajax({async: true, data: {},
            dataType: "JSON", success: function(data, textStatus) {
            }, type: "GET", url: "http:\/\/api.geonames.org\/searchJSON"});
        return false;
    });
});

Apparently, the . bind() function does not work in Internet Explorer, and I read that I can use . on() to replace it.

The question is, can I change these methods without having to tamper with Cakephp’s core or is there some smarter solution?

Answer 1

Observing the native code of cakephp I believe you will need to create your custom helper.

Basically you will copy all the dependencies of jshelper and make a change to line 183 of the archive JqueryEngigeHelper.php of:

return sprintf('%s.bind("%s", %s);', $this->selection, $type, $callback);

To:

return sprintf('%s.on("%s", %s);', $this->selection, $type, $callback);

To find the files you will need to duplicate access the folder:

lib/Cake/View/Helper/JqueryEngineHelper.php

Answer 2

No apparent reason not to work in IE look at the internal bind code in jquery

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
}

Now the call of on

on: function(types, selector, data, fn)

So, how do we notice the bind calls the on passing the second parameter that would be the selector as null, only that.

Answer 3

The method on() is the evolution of bind(), can change without fear.

of documentation:

As of jQuery 1.7, the . on() method is the Preferred method for Attaching Event handlers to a Document. For earlier versions, the . bind() method is used for Attaching an Event Handler directly to Elements.