使用MVC5 C＃和Razor在部分視圖中運行javascript

Question

我在使用Razor Engine的MVC5和C＃中創建了一個小型Web應用程序。在我的代碼中，我有一個主視圖，它是一個表的索引，帶有一些按鈕。當我點擊其中一個按鈕時，Bootstrap模式出現。

到目前爲止這麼好，但問題是我想在點擊模式上的按鈕時執行某些操作，但沒有任何反應。

這是主要的觀點：

<div id="editModal"></div> 
    <a class="btn btn-default editPackage"t itle="Edit Package"><i class="icon-edit"></i></a> 
    <h1>Package List</h1> 

    <table class="table" id="packagesTable"> 
     <!-- Big ass table here :D --> 
    </table> 

這是我的顯示模式，通過使用jQuery：

//Show Edit Package modal 
    $(".btn.btn-default.editPackage").click(function() { 

     $.ajax({ 
      url: $(this).data('url'), 
      type: 'GET', 
      cache: false, 
      success: function (result) { 
       $('#editModal').html(result).find('.modal').modal({ 
        show: true 
       }); 
      } 
     }); 
     return false; //prevent browser defualt behavior 
    }); 

到目前爲止好。一切正常。這個問題是與模態...

這是模態：

<div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4> 
     </div> 
     <div class="modal-body"> 
      <form class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label">Package Name:</label> 
       <div class="controls"> 
       <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
       </div> 
      </div> 
      <!-- Other fields here --> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button> 
     </div> 
     </div> 
    </div> 
    </div> 

這是前述的Javascript我想運行在一個模式按鈕被點擊時：

$(document).ready(function() { 
    $("#savePackageChangesBtn").click(function() { 
    $('.modal').modal({ 
     show: true 
    }); 
    return false; //prevent browser defualt behavior 
    }); 
}); 

的主視圖位於名爲「Index.cshtml」的文件中。模態視圖是一個名爲「_EditModal.cshtml」的文件（因爲它是一個局部視圖）。 javascript代碼是一個名爲「custom.js」的文件，它在主視圖中使用並運行得非常好。

爲什麼這不起作用？

Answer 1

您的模式是動態添加的，但您的$("#savePackageChangesBtn").click(function()已在DOM就緒時間（當目標元素不存在綁定時）註冊。

如果您單擊處理前加入alert($("#savePackageChangesBtn").length);它會返回0

使用委託的事件處理程序，連接到非改變的祖先元素。

例如

$(document).on('click', "#savePackageChangesBtn", function() 

這通過偵聽該事件冒泡到非改變祖先，則在事件時間不事件登記時間施加jQuery選擇。這意味着元素只有在點擊發生時才存在。

你通常會選擇一個非改變元件接近加載的內容，所以可能使用#editModal而不是文件

例如

$('#editModal').on('click', "#savePackageChangesBtn", function() 

注：document是最好的默認值，如果沒有其他方便，但不要使用'body'爲造型會導致其不冒泡響應鼠標事件（例如，如果body的計算高度爲零）。

Answer 2

要麼添加$("#savePackageChangesBtn").click(function() {});代碼告訴你之後模態

例如

//Show Edit Package modal 
$(".btn.btn-default.editPackage").click(function() { 

    $.ajax({ 
     url: $(this).data('url'), 
     type: 'GET', 
     cache: false, 
     success: function (result) { 
      $('#editModal').html(result).find('.modal').modal({ 
       show: true 
      }); 
      $("#savePackageChangesBtn").click(function() { 
       $('.modal').modal({ 
        show: true 
       }); 
       return false; //prevent browser defualt behavior 
      }); 
     } 
    }); 
    return false; //prevent browser defualt behavior 
}); 

或添加以下到您的document.ready

$(document).on("click", "#savePackageChangesBtn", doSomething); 

這使得您的文檔聽初始化後，創建的元素。

而在doSomething添加你想要的。