javascript - 使用 MVC5 C# 和 Razor 在部分 View 中运行 javascript

Question

我有一个使用 Razor 引擎的 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”的文件(因为它是部分 View )。 javascript 代码是一个名为“custom.js”的文件，它在主视图中使用并运行得非常好。

为什么这不起作用？

Answer 1

您的模式是动态添加的，但您的 $("#savePackageChangesBtn").click(function() 是在 DOM 准备就绪时注册的(当目标元素不存在可绑定(bind)时)。

如果您在点击处理程序之前添加 alert($("#savePackageChangesBtn").length);，它将返回 0。

使用委托(delegate)事件处理程序，附加到不更改的祖先元素。

例如

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

其工作原理是监听事件冒泡到不变的祖先，然后在事件时间而不是事件注册时间应用 jQuery 选择器。这意味着该元素只需在单击发生时存在。

您通常会选择靠近加载内容的不变元素，因此可能使用#editModal 而不是文档

例如

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

注意:如果没有其他方便的话，document 是最好的默认值，但不要使用 'body' 因为样式可能会导致它不响应冒泡鼠标事件(例如，如果计算出的 body 高度为零)。