Question

我是MVC的新手，并试图学习它。

在我看来，我有一个下拉列表的部分视图：

 <div class="panel-body col-xs-12 col-sm-12 col-md-12 col-lg-12" id="LocationsList">
 <div class="row row-spacing">
 <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
  @Html.LabelFor(m => m.locationType.Name, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
  @Html.DropDownListFor(m => m.locationType.LocationTypeID,
                        new SelectList(Model.LocationTypes,
                                       "LocationTypeID",
                                       "Name"),
                        htmlAttributes: new { @class = "form-control dropdown", id = "cbLocationTypes" })
  @Html.ValidationMessageFor(m => m.locationType.LocationTypeID, "", new { @class = "text - danger" })
</div>
</div>

<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" style="border-bottom: 2px solid darkgray;">
  <span class="caption h4 text-info">Locations</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="border-bottom: 2px solid darkgray;">
  <span class="caption h4 text-info">&nbsp;</span>
</div>
</div>
 @if (Model != null)
  {
    var m = Model.Locations;
    if (m.Count > 0)
    {
      foreach (var item in m)
      {
    <div class="row" style="margin-bottom: 2px; margin-top: 2px;">
      <div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
        @Html.DisplayFor(modelItem => item.Name)
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-padding no-margin" style="width: 60px;">
        <a href="@Url.Action("SelectLocation", "Locations", new { ID = item.LocationID })" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-pencil halfsize"></span>
        </a>
        <a href="@Url.Action("DeleteLocation", "Locations", new { ID = item.LocationID })" class="btn btn-default btn-xs btn-red" ID="btnDeleteLocation" clientID="btnDeleteLocation">
          <span class="glyphicon glyphicon-remove halfsize no-padding no-margin"></span>
        </a>
      </div>
      <div class="col-sx-2 col-sm-2 col-md-2 col-lg-2 no-padding no-margin" style="width: 55px;">
        @if (item.Position > 1)
        {
          <a href="@Url.Action("MoveUp", "Locations", new { ID = item.LocationID })" class="btn btn-default btn-xs btn-green">
            <span class="glyphicon glyphicon-chevron-up halfsize"></span>
          </a>
        }
        else
        {
          <span style="padding-left: 25px;"></span>
        }
        @if (item.Position < m.Count())
        {
          <a href="@Url.Action("MoveDown", "Locations", new { ID = item.LocationID })" class="btn btn-default btn-xs btn-green">
            <span class="glyphicon glyphicon-chevron-down halfsize no-padding no-margin"></span>
          </a>
        }
      </div>
    </div>
  }
}
else
{
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <span class="label label-primary h4">No locations available</span>
  </div>
 }
 }
 else
{
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <span class="label label-primary h4">No locations available</span>
</div>
}
</div>

在放置此部分的索引视图中，我有Jquery代码：

$('#cbLocationTypes').on('change', function () {
    var id = $('Select#cbLocationTypes').val();
    $.ajax({
      url: '/locations/RefreshList/' + id.toString(),
      type: 'GET',
      success: function (data) { $('#LocationsList').html(data); } })
      .done(function() {
        $('#LocationsList option[value='+id.toString()+']').prop("selected", "selected");
      })
  });

在我的控制器中，我有代码在下拉选择更改时运行：

[HttpGet]
public ActionResult RefreshList(int id)
{
  LocationsViewModel vm = new LocationsViewModel();
  vm.Locations = db.Locations.OrderBy(m => m.Position).Where(m=>m.LocationTypeID== id).ToList();
  vm.LocationTypes = db.LocationType.OrderBy(m => m.Name).ToList();
  vm.Location = new Locations();
  vm.Location.LocationID = -1;
  vm.Location.Name = "";
  vm.Location.LocationTypeID = 1;

  return PartialView("_LocationsListPartial", vm);
}

第一个电话完美无缺。部分表格已更新。

但是....

当我再次更改下拉列表的选择时，没有任何反应。 jquery事件没有响应（在开发人员面板中使用break检查）。

我做错了什么/我错过了什么？

Answer 1

当您使用每个事件执行的新元素更新DOM时，您必须使用委托事件：

$('#LocationsList').on('change', '#cbLocationTypes', function () {
     // code block
});

此语法为：

$(staticParent).on(event, selector, callback);

此处$(staticParent)应该是页面加载时页面上可用的最接近的父元素。虽然事件也可以委托给$(document)，但不建议在大型DOM结构中使用。这可能会导致缓慢。

Answer 2

从id = "cbLocationTypes"中删除DropDownFor 试试这个

@Html.DropDownListFor(m => m.locationType.LocationTypeID, new SelectList(Model.LocationTypes, "LocationTypeID", "Name"), "-- Select --", new { @class = "form-control", onchange="getlocation(this);" })


<script>
    function getlocation(element) {
    var id = $(element).val();
    $.ajax({
      url: '/locations/RefreshList/' + id.toString(),
      type: 'GET',
      success: function (data) { $('#LocationsList').html(data); } })
      .done(function() {
        $('#LocationsList option[value='+id.toString()+']').prop("selected", "selected");
      })

    }
</script>

MVC DropDownFor第二次选择不触发jquery更改事件

2 个答案: