jQuery on('click') not working on dynamically generated page

Question

I'm using handlebars to dynamically generate html pages for a NodeJS project. I have an event.js and a jquery.min.js file that are both loaded.

Here's part of the HTML :

<td>
    <input id="temps_ajout_resultat" name="temps" type="text" value="{{tempsMini}}" pattern="[0-5][0-9]:[0-5][0-9]:[0-9][0-9]" title=" Format hh:mm:ss et au moins {{tempsMini}}">
</td>
<td>
    <input id="tempsMini_ajout_resultat" class="hidden" name="tempsMini" type="text" value="{{tempsMini}}">
    <input id="nbpoints" class="hidden" name="nbpoints" type="number" value="{{nbPointsSuivant}}">
    <input id="num" class="hidden" name="num" type="number" value="{{gpnum}}">
</td>
<td><button id="valider_ajout_resultat" type="button" value="Ajouter">Valider</button></td>

And part of the Javascript :

$('body').on('click', '#valider_ajout_resultat', function() {

    console.log('test');
    console.log($('body').find('#tempsMini_ajout_resultat').val());
    console.log($('body').find('#temps_ajout_resultat').val());

    validerTempsCourse($('body').find('#tempsMini_ajout_resultat').val(), $('body').find('#temps_ajout_resultat').val());});

The problem is that clicking on the "valider_ajout_resultat" button does absolutely nothing. The console says nothing either.

Anyone sees the problem?

Thanks!

Any [console](https://webmasters.stackexchange.com/questions/8525/how-do-i-open-the-javascript-console-in-different-browsers) error? — Louys Patrice Bessette, Apr 02 '18 at 18:32
Either you are misinterpreting results, or the problem is elsewhere. Are you sure that line of code even runs? — Kevin B, Apr 02 '18 at 18:33
If you comment `validerTempsCourse(...)` line out... Do you have the console logs? — Louys Patrice Bessette, Apr 02 '18 at 18:35
In the console... You can type commands in. Type `$.fn.jquery`. It should output the jQuery version you are using if it's loaded. — Louys Patrice Bessette, Apr 02 '18 at 18:38
are you using any 3th party plugins, which maybe use `stopPropagation()` in body. did you try it with `document`? — Sysix, Apr 02 '18 at 18:43
It's using the 3.3.1 version. Using 'document' doesn't change the problem no, I'm using express. — Lucky-Luke87, Apr 02 '18 at 18:46
Maybe the `click` event is prevented somewhere... Try with `mouseup`. — Louys Patrice Bessette, Apr 02 '18 at 18:50
There is a problem elsewhere then... I can't tell. The code you posted works [here](https://codepen.io/Bes7weB/pen/geKxjP?editors=1011). — Louys Patrice Bessette, Apr 02 '18 at 19:23
Yeah I see... I guess Handlebars is doing weird stuff, but it used to work in classic Javascript until it suddenly glitched and I tried to convert it to jQuery. If I don't find a solution I guess I'll have to trigger it in an html onClick. Thanks though! — Lucky-Luke87, Apr 02 '18 at 19:37

score -1 · Answer 1 · answered Apr 02 '18 at 18:37

Can you edit the dynamically generated code?

You could put an onclick on the button and call a function:

<button onclick="myFunction()" id="valider_ajout_resultat" type="button" value="Ajouter">Valider</button>

and then in your javascript:

function myFunction() {
    console.log('test');
    console.log($('body').find('#tempsMini_ajout_resultat').val());
    console.log($('body').find('#temps_ajout_resultat').val());

    validerTempsCourse($('body').find('#tempsMini_ajout_resultat').val(), $('body').find('#temps_ajout_resultat').val());});
}

Does this work for you?

Triggering it this way does work, but I really need to make it work the way I put it here for the following functions — Lucky-Luke87, Apr 02 '18 at 18:43

jQuery on('click') not working on dynamically generated page

1 Answers1