How can I trigger a button click using jquery on a dynamic button that ajax is being used on?

Question

Ok, I have a form within a Twitter Bootstrap accordion that has radial buttons that switches to different types of the form. They all use the same button which changes dynamically for each form, so it knows the right action to be called.

I have a button on the accordion header that I want to trigger a click on whatever radial form they have picked.

It kind of looks like this:

Accordion Header ActionButton

radial option 1 (not selected)

radial option 2 (selected)

input field

input field

OriginalButton (that already works. I want to copy this functionality to the above button on the header)

---

WITH THE OTHER RADIAL BUTTON SELECTED

Accordion Header ActionButton

radial option 1 (selected)

input field

input field

input field

input field

OriginalButton (same button as above, but performs a different function based on the different inputs. I need the actionButton to now perform the function of this button)

radial option 2 (not selected)

---

Because the html references different files, I was trying to trigger the button click like so:

$side-bar.find('#actionButton').on('click', function(){
        $side-bar.find('#accordionHeader').find('form').find('button').trigger('click');
    });

but this does not work, is there anything like this I could use? Just using

$side-bar.find('#actionButton).on('click', function(){
        $side-bar.find('#originalButton').click();
    });

does not work.

Help is much appreciated!

Answer 1

I've made a fiddle on what I believe it is that you want to do.

Using jquery's trigger method on the radio buttons click events will let you call another elements event triggers.

$('input[type=radio]').on('click', function() {
    $('#test_btn').trigger( "click" );
});

http://jsfiddle.net/Villike/P3V4M/

Answer 2

Try saving the #originalButton object into a variable and then using that instead of find ing it again. Perhaps you're removing it from ´side-bar´ at some point and that's causing it to not be found?

Answer 3

I was thinking about it way too much. apparently, all I needed was

$side-bar.find('#actionButton').on('click', function(){
    $side-bar.find('#originalButtonInReferencedHTMLFile').click();
});

I thought because it was being referenced by the side-bar.html file, I needed to .find().find() to go through all the references.

Turns out, if it is called by the side-bar at all, then the side-bar can find it itself without the extra .find()s or whatever!