Onclick Event Javascript & JQuery

Question

I have the following code snippets in my main.js file

function one(){
  //some code
  var btn = "<button type='submit' id='processReceipt' class='btn btn-primary' onclick='form_new_receipt()'>Submit</button>";

  document.querySelector('#showGrower').innerHTML += btn;
}

The function the submit button is calling is below

$(document).ready(function() {
  // Do your event binding in JavaScript, not as inline HTML event attributes:
  $("#processReceipt").on("click", form_new_receipt);
  function form_new_receipt() {
    alert('before function');
  }
});

What could I be missing because the alert does not show up - meaning the function is not being called.

I had tried this below but it didn't work - that's why I added the $(document).ready

function form_new_receipt() {
  alert('before function');
}

any error you are grtting in browser console when clicking button? — Alive to die - Anant, Nov 07 '17 at 10:18
*"What could I be missing?"* Hard to say, you didn't even tell us what is your problem. — dfsq, Nov 07 '17 at 10:18
Possible duplicate of [jquery - Click event not working for dynamically created button](https://stackoverflow.com/questions/20819501/jquery-click-event-not-working-for-dynamically-created-button) — Zenoo, Nov 07 '17 at 10:18
Move function outside of `$(document).ready(function() {..});` and check — Alive to die - Anant, Nov 07 '17 at 10:19
@AlivetoDie these are different functions doing different things. I cut out some code to make the question easy. — edy.devs, Nov 07 '17 at 10:28

Faisal Umair · Answer 1 · 2017-11-07T11:13:07.540

If you want to bind the click handler in javascript, you need to set the click handler after adding the button to DOM.

You can add the click handler inside the one() function. (I have removed the onclick attribute from the button).

function one(){
//some code
var btn = "<button type='submit' id='processReceipt' class='btn btn-primary'>Submit</button>";

document.querySelector('#showGrower').innerHTML += btn;

    $("#processReceipt").on("click", form_new_receipt);
    function form_new_receipt() {
        alert('before function');
    }
}

Alternatively, what you can do is you can attach the click handler to a parent static element like body

$(document).ready(function() {
    // Do your event binding in JavaScript, not as inline HTML event attributes:
    $('body').on("click", "#processReceipt", form_new_receipt);
    function form_new_receipt() {
        alert('before function');
    }

});

And of course you don't want to forget to call one() function.

Link to jsfiddle for both cases:

https://jsfiddle.net/jej453se/

https://jsfiddle.net/jej453se/1/

score 0 · Answer 2 · answered Nov 07 '17 at 10:26

You are missing to call one(), Please see below code

<div id="showGrower"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function one(){
    var btn = "<button type='submit' id='processReceipt' class='btn btn-primary' onclick='form_new_receipt()'>Submit</button>";
    document.querySelector('#showGrower').innerHTML += btn;
}

$(document).ready(function() {
    one();  // Call one() function 
    $("#processReceipt").on("click", form_new_receipt);
    function form_new_receipt() {
        alert('before function');
    }
});
</script>

Zakaria Acharki · Answer 3 · 2017-11-07T11:01:18.410

No need for vanillaJS since you're using the jQuery you could also it will be better to prevent the use of inline-event's as onclick and attach your click event just from the jQuery code like the following snippet shows.

Hope this helps.

$(document).ready(function() {
   one();
});

function one(){
  $('#showGrower').append("<button type='submit' id='processReceipt' class='btn btn-primary'>Submit</button>");
  
  $("#processReceipt").on("click", form_new_receipt);
}

function form_new_receipt() {
  alert('before function');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="showGrower"></span>

score 0 · Answer 4 · answered Nov 07 '17 at 10:29

what is the problem? what the expected behavior? what the current non-expected behavior? btw you don't need to put onclick="" in the html if you add it later on with jQuery. anyway, your code has two conceptual problems:

if you want to use jQuery, you have to bind it once the element is created:

function one(){
    //some code
    var btn = "<button type='submit' id='processReceipt' class='btn btn-primary'>Submit</button>";

    document.querySelector('#showGrower').innerHTML += btn;

    $("#processReceipt").on("click", function form_new_receipt() {
        alert('before function');
    }
}

if you want to use onclick inside html you have to declare the function in the global scope

function form_new_receipt() {
    alert('before function');
}

you could also create the element with

var a = document.createElement('button');

and assign properties programmatically

a.type = 'submit';
...

that is significantly faster and allows you to bind events like

a.addEventListener('click', (eventArg) => {
    alert('hello!');
}

score 0 · Accepted Answer · answered Nov 07 '17 at 10:30

0

Is this what are you looking for?

function one(){
var btn = "<button type='submit' id='processReceipt' class='btn btn-primary' onclick='form_new_receipt()'>Submit</button>";
$('#showGrower').append(btn);
}

$(document).on('click', '#processReceipt', function() {
     one()
});

function form_new_receipt(a) {
    alert('before function');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showGrower"></div>
<button id="processReceipt" type="button">Click me</button>

answered Nov 07 '17 at 10:30

SilverSurfer

4,281
6
24
50

It has worked but its calling the function 3 times. Its a better prob. Will figure it out. Thanks. – edy.devs Nov 07 '17 at 10:41
It has worked but its calling the function 3 times. Its a better prob. Will figure it out. Thanks. – edy.devs Nov 07 '17 at 10:42
My example is working, anyway I dont know how is exactly the rest of your code. – SilverSurfer Nov 07 '17 at 10:46

score 0 · Answer 6 · answered Nov 07 '17 at 11:18

First: why do you wan to create 2 kinds of code (plain javascript and jquery). You can achieve what you desire with only 1 type.

But still, taking your code, I have created a codepen. Please try, it works:

https://codepen.io/vishalkaului/pen/ZapXpG

The issue why it wasn't working was you were not executing the function one. I have changed it to an IIFE which would run automatically without being called explicitly.

Onclick Event Javascript & JQuery

6 Answers6