in other element, not working phonegap event api ex) backbutton

Question

document.addEventListener("deviceready", function () {
    document.addEventListener("backbutton", function() {
        alert("hello");
    });
});

it's working but

var element = $("#score-screen")[0];
element.addEventListener("deviceready", function() {
    element.addEventListener("backbutton", function() {
        alert("hello");
    });
});

score-screen is div id it's not working.. help me.. please

Answer 1

I think that device ready and BackButton be fired only on the document.

Phonegap documentation: http://docs.phonegap.com/en/2.3.0/cordova_events_events.md.html#deviceready

This is a very important event that every Cordova application should use.

Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.

The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.

Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

This event behaves differently from others in that any event handler registered after the event has been fired will have its callback function called immediately.