javascript - ブートストラップモーダルのAjaxロードフォームで.on（）関数が機能しない

Question

したがって、 index.htmlで次のようにしてフォームをロードしています。

 $(".add-cell").click(function(ev) { // for each edit contact url
        ev.preventDefault(); // prevent navigation
        var url = $(this).data("form"); // get the contact form url
        $("#cell-modal").load(url, function() { // load the url into the modal
            $(this).modal('show'); // display the modal on url load
        });
        return false; // prevent the click propagation
    });

これにより、ファイルadd.htmlにあるフォームが読み込まれます。これはフォームです：

 <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>{{l_name}}, <small>new cell</small></h3>
 </div>
 <div class="modal-body">
    <form class="cell-form" action="/cells/add/{{l_name}}/{{l_id}}/" method="post">   
     {% csrf_token %}
     {{ cell_form.as_table }}
     </form>
 </div>
 <div class="modal-footer">
     <input class="btn btn-success submit" type="submit" id="cell_submit" value="Submit" />
     <input type="button" name="cancel" class="btn btn-danger" data-dismiss="modal" value="Close"/>
 </div>

今、私のindex.htmlに次のコードがあります：

 $('.cell-form').on('submit', function() {
        $.ajax({ 
            type: $(this).attr('method'), 
            url: this.action, 
            data: $(this).serialize(),
            context: this,
            success: function(data, status) {
               //Do stuff
            }
        });
        return false;
    });

このコードは機能し、このスクリプトはadd.htmlではなくindex.htmlにあります。ただし、このコードが、 index.htmlに配置されたときにadd.htmlのボタンが機能しないのはなぜですか？：

    $("#cell_submit").on('click', function(event){
        alert("LOL");
    });

JSをadd.htmlではなくindex.htmlに配置したいと思います。

ありがとう！