Jquery関数はwebgrid内の新しいデータからイベントを発生させることはできません

Question

この問題のタイトルをどのように指定するのかは正確にはわかりませんでしたが、私の問題はWebGridに入れられる新しい要素に基づいてjquery関数を呼び出しています。しかし、私のwebgridは、ラジオボタンのトグルに設定されています。その後、グリッドはajax呼び出しによって新しいデータで更新されます。したがって、ページのリフレッシュは行われず、私の要素はグリッドに存在しますが、JavaScriptはそれらについて知りません。

以下は私のコードの一部です。

のWebGrid：

@grid.GetHtml(tableStyle: "table table-striped table-bordered", 
      headerStyle: "thead-default", 
      columns: grid.Columns(
       grid.Column("account_number", "Account Number", canSort: true), 
       grid.Column("last_name", "Last Name", canSort: true), 
       grid.Column("first_name", "First Name", canSort: true), 
       grid.Column("middle_name", "Middle Name", canSort: true), 
       grid.Column("reject_reviewed", "Reviewed", canSort: true, format: (item) => Html.CheckBox("completed", (bool)(item.reject_reviewed == 1), new { disabled = "disabled" })), 
       grid.Column("comment", "Comments", format: (item) => 
        new HtmlString(
         Html.ActionLink("Add", "RejectAddComment", controller, new RejectCommentViewModel { reject_id = item.id, account_number = item.account_number, reject_message = item.reject_message }, 
          htmlAttributes: new { data_modal = "", id = "btnCreate", @class = "" }).ToString() 
            + " | " + 
         Html.ActionLink("View", "RejectViewComment", controller, new RejectCommentViewModel { reject_id = item.id, account_number = item.account_number, reject_message = item.reject_message }, 
          htmlAttributes: new { data_modal = "", id = "btnCreate", @class = "" }).ToString())), 
       grid.Column("reject_message", "Reject Message", canSort: true))) 

のjavascript：

$("a[data-modal]").on("click", function (e) { 

$("body").on("click", 'a[data-modal]',function (e) { 

へ：

$(function() { 

    $.ajaxSetup({ cache: false }); 

    $("body").on("click", 'a[data-modal]', function (e) { 

     // hide dropdown if any 
     $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle'); 


     $('#myModalContent').load(this.href, function() { 


      $('#myModal').modal({ 
       /*backdrop: 'static',*/ 
       keyboard: true 
      }, 'show'); 

      bindForm(this); 
     }); 

     return false; 
    }); 
}); 

function bindForm(dialog) { 

    $('form', dialog).submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       if (result.success) { 
        $('#myModal').modal('hide'); 
        //Refresh 
        location.reload(); 
       } else { 
        $('#myModalContent').html(result); 
        bindForm(); 
       } 
      } 
     }); 
     return false; 
    }); 
} 

Answer 1

この

$("#scroll-grid").on("click", "#btnCreate", function (e) 

にラインを変更しましたjavascriptイベントが発生します。

最初の要素は親要素でなければならず、clickイベントの後にイベントを探している要素でなければなりません。

Answer 2

から結合あなたのイベントを変更しますと、有名な問題ですところで、あなたのグリッドIDまたはクラス

のようなもの、身体よりもAA優れたセレクタを使用することをお勧めし、googled