How to interact with elements generated by a javascript code?

Question

Example using jquery and materialize.js

Once created an element with a js code, for example:

$('#buttonA').click(function() {
 $('.container').empty;
 $('.container').prepend('<a class="button" id="buttonB" data-id="21">Second button</a>');
}

Is created a button successfully but the problem appears when I want to code something with this generated button, for example:

$('#buttonB').click(function() {
     Materialize.toast('This message is not gonna appear', 1500, 'green');
    }

Nothing will happen. Anybody knows how to make it work as a normal element? I'd be so grateful :-)

Honestly I'm not very experienced in jquery and I only know few functions, if you could explain more about `.on` and its structure it'd great :) — Ismael Quirantes, Mar 17 '18 at 19:16
For those who're reading, you just have to change `$('#buttonB').click(function() {` for `$(document).on('click', '#buttonB', function(){` — Ismael Quirantes, Mar 17 '18 at 22:54

score 0 · Answer 1 · answered Mar 17 '18 at 19:11

0

First of all, your code has escaping issue with ": If you still have issue after fixing this, feel free to comment and I will look into it further

$("#buttonA").click(function() {
 $(".container").empty;
 $(".container").prepend("<a class=\"button\" id=\"buttonB\" data-id=\"21\">Second button</a>"); // you need to escaping "s carefully
}

answered Mar 17 '18 at 19:11

Kevin Qian

2,532
1
16
26

Sorry my actual code is longer I've written this quickly, let me fixing it. I'm completely sure that its not the problem. – Ismael Quirantes Mar 17 '18 at 19:14

How to interact with elements generated by a javascript code?

1 Answers1