Show DIV when I click the Button via Jquery

Question

I’m using the following code to show the DIV when I click the button:

$(".button").click(function(){
  $(".div").css("display","flex");
});

It is working normally when I click the button created directly in html. It turns out that when I create the same button with jquery it doesn’t work.

var divs = '<div class="col-2"><button data-action="addCart" class="addCart" type="button" name="button">+</button></div>';

        $(".container").append(divs);

Both the button I was creating directly in html and the one generated via jquery (pq are multiple Divs) are exactly the same in Chrome inspection, but the second one does not change the CSS to flex. I’m using the same class for both.

Answer 1

It really won’t work because the element was created after the DOM was rendered. But you can get around it like this:

$(document).on('click', '.button', function(){
    $(".div").css("display","flex");
});

The method on works for dynamically added elements.

Complementing:

Difference between . on(click) vs . click()

What is the difference between . on("click", Function() {}) and . click(Function() {})?