javascript - jQuery：如何使 jQuery 代码在新构建的 Modal 中运行

Question

我在下面有一个常见的模态。

 <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>

如您所见，它非常空。相关数据在通过以下代码激活之前放入Modal。

$("#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>`
            );
          }     

问题是 class="addcart2" 的按钮不响应 jQuery 代码如下。

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

        });

所有的 jQuery 代码都包含在 $(document).ready(); 中。我怀疑 Modal 具有独立于文档范围的范围。请问有人能告诉我这是怎么回事吗？

标签： javascriptjquerymodal-dialog

Answer 1

jQuery 的这种语法在文档准备好后无法识别附加元素。只需使用以下语法：

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