jQuery (mobile) not triggering .change event on Phonegap app

Question

(because 2 days I had no issues with this...)

I have a multipage layout, in one of my pages I have a structure like so:

<div id="view_offer" data-role="page">
        <div data-role="header">
            <h1>Edit Offer</h1>
        </div>
        <div data-role="content">
            <p><label><input id="auto_renew" type="checkbox" name="checkbox-0">Auto renew?</label></p>
        </div>
    </div>

With the following scripts (in this order) before I close the body tag:

    <script src="js/cordova-2.5.0.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.mobile-1.3.0.min.js"></script>
    <script src="js/home_m_scripts.js"></script>

My home_m_scripts.js file:

$("#auto_renew").change(function(){
    alert("Changed!");
});

My change event is not triggering though, I'm at loss here.

Solution

Change your code from:

$("#auto_renew").change(function(){
    alert("Changed!");
});

To:

$(document).on('change','#auto_renew',function(){ 
    alert("Changed!"); 
});

When you bind an event like this it will act as an event delegation. Basically object don't need to exist in a DOM when you execute this binding.