Question

I admittedly don’t know much about JQuery but I have an AJAX form where I need to trigger a click event when someone clicks the submit button, but because the button is not there initially, but on page three of the same form (The URL doesn’t change),I’m having issues using the click event.

In my code, I just want to run a function when a button is clicked.

<script type="text/javascript">
    //Run function when button is clicked

    $(document).ready(function () {
        $("#idOfButton").click(function () {
            doSomething();
        });
    });

    //The function I want ran when page visitor clicks button

    function doSomething() {
        //Do Something
    }
</script>

Obviously this code doesn’t work, but any suggestions on how to use .click? I’m only able to insert JS via a tag management system, so I can’t hard code anything into the page. Also, the JQuery version is 1.4, so I can’t use .on. Thanks for your help.

Answer 1

Your code need to use the .on so that the event is bound when the button is available.. If you do not have the latest jQuery file available the you can use the .live instead.. Also you are saying that the button is not available on PageLoad.. So I created a small example of creating a button when a checkbox is checked.. After the button is created I am adding the event handler.. Chekc this

       <script type="text/javascript">


     <script type="text/javascript">
    //Run function when button is clicked

    $(document).ready(function () {
        $("#idOfButton").live('click', function () {
            doSomething();
        });
    });

    //The function I want ran when page visitor clicks button

    function doSomething() {
        //Do Something
    }
</script>

Check the FIDDLE here
Also if you do not have the latest copy you can use the file hosted by google CDN .. You just need to include this file in your project..

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

This will make sure you have the latest copy , and also reduces your site’s bandwidth..