Click here to Skip to main content
15,887,175 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am trying to rebind onclick events to buttons after the form has been submitted.
However i can't seem to rebind the click event after the initial click. I've created a brief example below to show highlight what i'm talking about.

What I have tried:

I have a basic index page that looks like the following

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com http://api.openweathermap.org 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <title>Test App</title>
    
    
</head>
<body>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/jquery-2.2.3.min.js"></script>
    <script src="scripts/jquery.mobile-1.4.5.min.js"></script>
    <script src="scripts/index.js"></script>

    <div id="test-page">
        <div class="ui-content">
            <form>
                <button id="test1" data-role="button">Test 1</button>
            </form>
            <form>
                <button id="test2" data-role="button">Test 2</button>
            </form>
        </div>
    </div>
</body>
</html>


I have a basic index.js file that looks like the following

JavaScript
(function () {
    "use strict";

    document.addEventListener("deviceready", onDeviceReady.bind(this), false);

    function onDeviceReady() {
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);
        bindEvents();
    };

    function onPause() {
    };

    function onResume() {
    };

})();

$(document).on('pageload', function () {
    bindEvents();
});

$(document).ready(function () {
    bindEvents();
});

$(document).on('pagechange', function (e, data) {
    bindEvents();
});

function bindEvents() {
    $("#test1").click(function () { alert("test1"); });
    $("#test2").click(function () { alert("test2"); });
}


Alerts show the first time a button is clicked. However subsequent clicks aren't showing any alerts (I've left in a lot of bindEvents calls to show what i've tried).
I've tried more scenarios but i just can't get the click event to bind after the initial click is done....what am i doing wrong?
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900