javascript - How to bind behavior on newly inserted Dom elements?

Question

In my website I have buttons that are loaded via AJAX. How can I ensure that my jQuery hide() operation is applied to all buttons that are inserted into the DOM in future? As far as I know on() works only when you register events like click for example.

<button class="myButtton">Button</button>

JavaScript:

$(".myButton").hide();

Answer 1

.myButton {
  display: none;
}

While adding the content apply myButton class to the element

Answer 2

you can use the jquery function .on() This will apply the behavior also to element that are added to the dom later.

$(document).on('click','.elementClass' , function(e){
     // do something
});

Answer 3

It's easier to just use css to have a hidden button upon being inserted. jQuery.hide() is basically in css display: none. http://api.jquery.com/hide/.

.myButton {
  display: none;
}

Then when you are ready to show it just use $(".myButton").show(); aka display: block.