Question

In the code below, jquery selector $(“:button”) is able to select the (+) button.

However, when I create new buttons according to selected value of the dropdown menu. The same selector is not able to select the new (-) buttons.

The code is attached :

 <script>
$(document).ready(function () {
$(":button").click(function () {
        alert("here");
        })
});

</script>

<select id="thing" name="garden" >
<option id="u" selected="selected" ></option>
<option id="1" > Flowers </option>
<option id="2" > Shrubs </option>
<option id="3" > Trees </option>
<option id="4" > Bushes </option>
<option id="5" > Grass</option>
<option id="6" > Dirt</option>

</select>

<button> + </button>

<div id="area"></div>

<button> + </button>
<script>
$("#thing").change(function () {
      var str = "";
      var id="";
      var num=1;
      $("#thing option:selected").each(function () {
            str += $(this).text() + " ";
            id = $(this).attr('id');
    $("#"+id).attr('disabled',"disabled");
          });
      if (id != "u") {
          var tx=$("#area").html();
          var button="<button>-</button>";
          $("#area").html(tx+"<div>"+str+" "+button+"</div>");
      };
    }).trigger('change');
</script>

Answer 1

$(document).on('click', 'button', function () {
    alert("here");
});

This is a delegated event handler, which means that it can work on dynamically added elements. From the jQuery documentation for the on method:

Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.