在按钮外部调用动作

Question

我写了一个脚本，我在页面上的各个部分添加了项目。我将通过一个特定部分的例子向您展示。问题出现在c-grid-box中，它负责父div的fadeOut。必须在diva添加函数之外调用负责此操作的匿名函数（否则我将不得不为每个错过目标的调用添加一个函数）。为此我写了这样的东西，虽然它仍然不起作用 - 这可能是什么原因？

function showModal(type) {
         
  switch(type) {

    case "title":

    $(".overlay").fadeIn("slow");
    $("#modal-inputs").html('<input type="text" placeholder="Title..." class="param-title" name="param-title" /><input type="text" placeholder="Description..." class="param-description" name="param-description" /><input type="submit" class="add-btn" id="insert-title" value="Insert" />');

    break;

  }
  
}

$("#add-text").on("click", function() {
		 
  showModal("title");

  $("#insert-title").on("click", function() {
  
    title = $(".param-title").val();
    description = $(".param-description").val();
    $('#section-title').append('<div class="grid-1-5"><div class="grid_box"><a href="#" class="c-grid-box">Delete</i></a><p class="grid-box-title">'+title+'</p><p>'+description+'</p></div></div>');
    $(".overlay").fadeOut("slow");
    
  });
		
});

$(".grid_box").on("click", ".c-grid-box", function() {
  alert("foo bar");
});

.overlay {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add-text">
  <i class="fa fa-align-justify" aria-hidden="true"></i> 
  <p>Add <i class="fa fa-angle-right" aria-hidden="true"></i></p>
</button>
            
<section class="add-box" id="section-title">
</section>

<div class="overlay">
  <div class="modal-box">
    <p class="modal-title"><i class="fa fa-cogs" aria-hidden="true"></i>Settings 
      <a href="#" class="c-modal"><i class="fa fa-times" aria-hidden="true"></i></a>
    </p>
    <div id="modal-inputs">
    </div>
  </div>
</div>