0

I'm working with an html file that sends and gets data from a Flask app. On this HTML, i have 2 scripts. The first one is something like this:

<button class="search">search</button>
(...)

$(function() {
$('.search').click(function() {
var name_field = $("#search_field").val();
var my_data={name:name_field};
AJAX sends my_data to Flask function, which will return the response variable below

$('body').append("<div class='new' id=\"empty\">"+response+"</div>")

That result will contain html code, including buttons of the class "add1"

This HTML file that contain the script above also contain another script that is triggered when the user clicks a button of the class "add1". My problem is: These appended buttons will NOT trigger the second jQuery function. Any buttons previously present in the code (before the append) of the class "add1" will, however.

There must be a way to inform jQuery that new buttons will be added and that they are valid, i think

David Spira
  • 153
  • 2
  • 16

1 Answers1

0

replace your $('.search') with $(document).find('.search')

this will allow jquery to select dynamically created elements.

Elvanos
  • 302
  • 2
  • 4