gpt4 book ai didi

javascript - MVC DropDownFor 第二个选择不触发 jquery 更改事件

转载 作者:行者123 更新时间:2023-12-02 15:16:19 26 4
gpt4 key购买 nike

我是 MVC 新手,正在尝试学习它。

在我看来,我有一个带有下拉列表的部分 View :

 <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>

在放置此部分的索引 View 上,我有 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");
})
});

在我的 Controller 中,我有当下拉选择更改时要运行的代码:

[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 事件没有响应(通过开发人员面板中的中断进行检查)。

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

最佳答案

当您在每次事件执行时使用新元素更新 DOM 时,您必须使用委托(delegate)事件:

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

这个语法是:

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

这里$(staticParent)应该是页面加载时页面上可用的最接近的父元素。虽然事件也可以委托(delegate)给 $(document) 但在大尺寸的 DOM 结构中不推荐。这可能会导致速度缓慢。

关于javascript - MVC DropDownFor 第二个选择不触发 jquery 更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34452704/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com