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

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.

Sushanth -- · Accepted Answer · 2012-09-13 16:01:10Z

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

edited Sep 13, 2012 at 16:01

answered Sep 13, 2012 at 15:36

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dpierre23 Over a year ago

Thanks, but I'm weary of using .on since I'm using an older version of JQuery. Will it work for 1.4?

dpierre23 Over a year ago

Thanks again, I updated my language on the question I posted to make things clearer. I don't actually need to create a button.

Sushanth -- Over a year ago

If that's the case adding the event handler with .live should be working unless the button is on a completely different page.. By Page3 do you mean Page3 of the same form or a completely different in general.. I have updated the code that uses .live and this is available for 1.4

dpierre23 Over a year ago

Thanks for all of your help Sushanth. Your method works, but when it didn't work on my site, I assumed it was human error on my part, but there's actually a JS framework conflict that I didn't know about. I'll check anyway.

Austin DeVinney · Accepted Answer · 2012-09-13 15:40:25Z

0

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.

answered Sep 13, 2012 at 15:40

Austin DeVinney

2733 silver badges12 bronze badges

2 Comments

dpierre23 Over a year ago

Oh I don't want it to affect anything on the AJAX'd page. I'm actually just want to implement event tracking to Google Analytics. So, when that button is clicked, it sends an event to GA.

Austin DeVinney Over a year ago

Ahh I see. You're building the form from an AJAX call, so it's not there initially. My apologies.

J.T. Blum · Accepted Answer · 2012-09-13 15:46:04Z

0

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);

answered Sep 13, 2012 at 15:46

J.T. Blum

3341 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related