Click events not being fired in PhoneGap / Backbone.js with Underscore.js template

Question

I have been making a Phonegap / Cordova 2.0 app with backbone.js which has all been fine until I tried to build in a form. The form is displayed but the click events do not trigger the keyboard.

I played around with different events and found that adding ontouchstart="this.focus()" brought up the keyboard fine. I added a catchall in the view function to bring focus:

window.PageView = Backbone.View.extend({

    initialize: function() {
        this.template = _.template(tpl.get('page'));
    },

    render: function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        $('input', $(this.el)).bind('touchstart',function(event) {
            $(this).focus();
        });
        return this;
    }

});

But even with this if I change bind('touchstart'... to 'click' it doesn't get triggered.

I have found a couple of other posts like: click event doesn't fire in an underscore template

which suggests it is to do with the underscore.js templating process but nothing is very clear.

I guess I could make a timer function on touchstart to simulate this but it's kindof mysterious so I want to know what's going on really.

Thanks.

Answer 1

It turns out it was iScroll causing the problem.

            onBeforeScrollStart: function (e) { e.preventDefault(); },

Specifically. I just commented out the e.preventDefault(); and it worked a treat!

Answer 2

Try this:

this.$(':input').bind(...)