javascript - jQuery : How to enable jQuery code to run within freshly constructed Modal

Question

I have got a common Modal below.

 <div class="modal fade" id="OptionModal" >
      <div class="modal-dialog">
        <div class="modal-content text-center">
          <div>
            <button type="button" style="margin:10px 10px" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div align="center"  class="text-center modal-header">
            <h2 align="center" style="font-weight:500;margin:auto" class="modal-title"></h2>
          </div>
          <div class="modal-body">
            <p align="center" class="modal-price"></p>
            <p align="center" class="modal-desc"></p>
            <p align="left" style="font-weight:800">Please Choose One from beneath</p>
            

            <table class="table table-striped table-hover">
              <thead align="center">
                <tr class="table-active">
                  <td>Option</td>
                  <td>Price</td>
                  <td>Add</td>
                </tr>
              </thead>
              <tbody align="center">
                
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

As you can see, it's pretty empty. The relevant data is put into the Modal before it is activated via the following code.

$("#OptionModal").find(".modal-title").text(itemN);
          $("#OptionModal").find(".modal-desc").text(itemDesc);
          $("#OptionModal").find(".modal-price").text("from $"+itemP);

          // console.log(itemOpt.length);
          $("#OptionModal").find("tbody").empty();
          
          for(let i=0;i<itemOpt.length;i++){
            
            $("#OptionModal").find("tbody").append(
              `<tr><td>${itemOpt[i].option_name}</td><td>$${(Number(itemOpt[i].option_price)+Number(itemP)).toFixed(2)}</td>
                <td><button class="addcart2 btn btn-success" ><i class="fas fa-arrow-right" ></i></button></td></tr>`
            );
          }     

The problem is button of class="addcart2" doesn't respond to the jQuery code as below.

$(".addcart2").click(function(){ 
          console.log("ok"); 

        });

All the jQuery code is enveloped inside $(document).ready(); I have the suspicion that the Modal has an independent scope from the document scope. Please can anybody tell me what's going on?

Answer 1

This syntax of jQuery does not recognize appended elements after document is ready. just use the bellow syntax:

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