寻求帮助...我正在使用 ASP MVC3 和 jQuery Mobile。我已经建立了一组级联下拉选择列表,当您第一次打开页面时可以正常工作。但是,提交表单后,它会返回到此页面,以便用户可以在需要时输入更多信息。问题是在您返回页面后级联下拉菜单不再起作用。
在 Firebug 中调试时,我在控制台中看不到任何错误。我必须进行 Control + F5 刷新才能让他们重新开始工作。如果我关闭 jQuery mobile ajaxEnabled 设置,那么它工作正常,所以这与 jQuery 移动框架和加载我认为的页面有关......
有人有想法么?
谢谢
编辑:以下是此页面的视图。基本上正在发生的是 $('#GasStation').change 事件似乎在用户被带回此页面后从未触发。如果我禁用 jQuery 移动 ajax 功能,它工作正常。
@model CPMobile.Models.FuelUsageModels.CreateModel
@{
Layout = "~/Views/Shared/M/_Layout.cshtml";
}
<h2>@ViewBag.Title</h2>
<div data-theme="b">
@Html.ValidationSummary(true, "Fuel usage recording failed. Please correct the errors and try again.")
<div data-role="fieldcontain">
@using (Html.BeginForm())
{
<div data-role="fieldcontain">
@Html.LabelFor(m => m.GasStation)
@Html.DropDownListFor(m => m.GasStation, Model.GasStationList, "Select Gas Station...")<br />
@Html.ValidationMessageFor(m => m.GasStation)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.FuelType)
@Html.DropDownListFor(m => m.FuelType, Enumerable.Empty<SelectListItem>(), "Select Fuel Type...")<br />
@Html.ValidationMessageFor(m => m.FuelType)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.EquipmentNumber)
@Html.TextBoxFor(m => m.EquipmentNumber, new { @required = "required" })<br />
@Html.ValidationMessageFor(m => m.EquipmentNumber)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.MeasurementValue)
@Html.TextBoxFor(m => m.MeasurementValue, new { @required = "required", @type = "number" })<br />
@Html.ValidationMessageFor(m => m.MeasurementValue)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.MeasurementDatetime)
@Html.EditorFor(m => m.MeasurementDatetime, new { @required = "required", @type = "date" })<br />
@Html.ValidationMessageFor(m => m.MeasurementDatetime)
</div>
<div data-role="fieldcontain">
<input type="submit" value="Submit" data-theme="b" />
</div>
}
</div>
</div>
@section scripts
{
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$('#GasStation').change(function () {
var selectedGasStation = $(this).val();
if (selectedGasStation != null && selectedGasStation != '') {
$.getJSON(
'@Url.Action("FuelType")',
{ gasStation: selectedGasStation },
function (fuelTypes) {
var fuelTypesSelect = $('#FuelType');
fuelTypesSelect.empty();
$.each(fuelTypes, function (fuelType, fuelTypeName) {
fuelTypesSelect.append($('<option/>', {
value: fuelType.value,
text: fuelTypeName.text
}));
});
fuelTypesSelect.selectmenu('refresh', true);
});
}
});
</script>
}