CODEWITHSUNDEEP
ajaxeventsjquery
dpierre23
dpierre23

Reputation: 37

How to Use JQuery Click Event on Button in an AJAX Form

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.

Upvotes: 0

Views: 8364

Answers (3)

Sushanth --
Sushanth --

Reputation: 55740

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..

Upvotes: 1

J.T. Blum
J.T. Blum

Reputation: 324

If the button isn't there on the initial page load you need to assign the callback immediately after you create the button. For example:

    var newButton = document.createElement('button');
    $(newButton).on('click',doSomething);

Upvotes: 0

Austin DeVinney
Austin DeVinney

Reputation: 273

So, I'm going to assume you mean the button is on your initial page load and you want it to affect something on the AJAX'd page. If that is the case, your jQuery obviously can't target an HTML element that doesn't exist.

Instead, you need to pass in something to the AJAX call, like a get variable. If you can not edit anything about the page you're going to, like accepting a new get variables and changing the logic, then it sounds like this problem isn't solvable given your constraints.

Upvotes: 0

Related Questions