Neela Neela - 1 month ago 5
jQuery Question

How to get form element seen in DOM and not in source code?

We are using the marketo form on one of our Drupal installation and I am trying to add a on click event when the button is clicked. But when I view the source I cannot see the from element . I can see it on the DOM inspector however.

This is what I see on the view source.

<form class="marketo-form-wrapper"
data-formid="####"
data-campaign="######"
data-file="####"
id="####">




The inspect element screenshot is attached.

No matter what I do I cannot call the click function when the submit button is clicked.
I could do upto this point

$('.marketo-form-wrapper').click(function (e) {
console.log('clicked');});


I dont want this function to be called when user clicks on the form wrapper. I want it to be called when the actual button is clicked.

If I do this nothing shows up.

$('.marketo-form-wrapper .mktoButtonRow:button').click(function (e) {

console.log('clicked');});

Answer

Use the delegate selector.

$('.marketo-form-wrapper').on("click",".mktoButton",function(){
    console.log("clicked");
});

This will apply a click handler to any element with the .mktoButton class, inside the .marketo-form-wrapper class, added after the DOM has loaded. Which is the case in your question.