-1
人們嚴重低估了這一點，因爲他們沒有答案？哇。jQuery在部分視圖中不選擇同一視圖內的元素
所以我有一個內部腳本的局部視圖，通過AJAX加載到父頁面中，這個腳本需要在這裏，因爲我通過剃鬚刀將Modal變量傳遞給腳本。
這裏是腳本的簡短版本，它沒有提到。
$(document).ready(function() {
//add rule if there is a subtype to select
if (Calendar.CalEventSubTypeListCount > 0)
{
console.log($('#CalEventBO_CalEventSubType_ID').data("name"));
$('#CalEventBO_CalEventSubType_ID').rules('add', { required: true, messages: { required: Calendar.RawMessage } });
}
if ($('#CalEventBO_AllDay').prop('checked')) {
$(".timeOptions").hide();
}
else
{
$(".timeOptions").show();
}
if (Calendar.BookForUser == 'True') {
$('.mngUsers').show();
//Check if the selected user has a colour day
checkColDay();
}
else {
$('.mngUsers').hide();
//Check if the logged in user has a colour day
checkColDay();
}
//On page load hide school options and mng user list for hols
$('.SchAdd').hide();
$('.AddCon').hide();
var eventTypeID = $('#CalEventBO_TypeID').val();
showHideTitleInput();
if (eventTypeID == Calendar.CalEventType) {
checkColDay();
}
所以問題是，它在說「#CalEventBO_CalEventSubType_ID」是不確定的。該元素與腳本處於相同視圖，但似乎該腳本在視圖加載之前運行，即使在IE中，視圖在中斷時暫停。
我試過對元素使用綁定（「加載」），（窗口）.load，將腳本放在父視圖中，從另一個視圖調用整個腳本，並從OnSuccess調用腳本AJAX負載。
在一個完全的損失，並開始認爲這是不可能的，我需要重寫整個頁面。
TL; DR：有沒有什麼辦法可以讓jQuery在部分視圖之後運行，它駐留在負載中？
局部視圖：
<div class="modal" id="CalAddEventModal">
<div class="window">
@using (Ajax.BeginForm("AddEvent", "Calendar", null, new AjaxOptions { UpdateTargetId = "addpanel" }, new { id = "fm_addev" }))
{
<fieldset>
<legend>Add New Event</legend>
<br />
@Html.HiddenFor(model => model.CalEventBO.SelectedMonth)
@Html.HiddenFor(model => model.CalEventBO.SelectedYear)
@Html.HiddenFor(model => model.CalEventBO.SchRequired)
@Html.HiddenFor(model => model.CalEventBO.TypeID)
<span class="blk_w">Category:</span>@Html.DropDownListFor(model => model.CalEventBO.TypeID, Model.TypeList, new { @class = "CatDDL" })
@* If there is at least 1 sub event type then show the choice *@
@if (Model.CalEventSubTypeList.Count() > 0)
{
<div class="subtype">
<span class="blk_w">@((CalEventType)Model.CalEventBO.TypeID == CalEventType.Meeting ? "Room:" : "Event Type:")</span> @Html.DropDownListFor(model => model.CalEventBO.CalEventSubType_ID, new SelectList(Model.CalEventSubTypeList, "ID", "Text"))
</div>
}
@if (Model.CalEventBO.TypeID == (int)CalEventType.Roadshow || Model.CalEventBO.TypeID == (int)CalEventType.OnSiteTraining)
{
<br />
<span class="blk_w">Venue:</span> @Html.DropDownListFor(model => model.CalEventBO.LAID, Model.LAList, "Please Select an LA") <br />
<div class="SchAdd" style="display:none;">
<span class="blk_w"></span> <div class="line">@Html.DropDownListFor(model => model.CalEventBO.SchID, Model.SchList)</div>
<div class="AddCon" style="display:none;">
<span class="blk_w">Venue Address:</span> <div class="address line"></div>
<br />
<span class="blk_w"></span> @Html.CheckBoxFor(model => model.AddressConfirmed) <strong class="num">I confirm the address above is correct</strong>
</div>
</div>
}
@switch (Model.CalEventBO.TypeID)
{
case (int)CalEventType.Meeting:
case (int)CalEventType.Other:
case (int)CalEventType.Exhibition:
case (int)CalEventType.OnlineTraining:
case (int)CalEventType.OutOfOffice:
case (int)CalEventType.OnlineDemo:
<div class="titleInput" style="display: none;">
<span class="blk_w">Title:</span> @Html.EditorFor(model => model.CalEventBO.Title)
</div>
break;
default:
break;
}
@if (Model.CalEventBO.TypeID == (int)CalEventType.OnlineDemo || Model.CalEventBO.TypeID == (int)CalEventType.Roadshow || Model.CalEventBO.TypeID == (int)CalEventType.OnlineTraining)
{
<br />
<span class="blk_w">Max Attendees:</span> @Html.DropDownListFor(model => model.CalEventBO.MaxAttendees, Model.MaxAttend)
}
<br />
<span class="blk_w">Start Date:</span> <div class="dateselect line">@Html.EditorFor(model => model.CalEventBO.StartDate)</div>
@if (Model.CalEventBO.TypeID != (int)CalEventType.Holiday && Model.CalEventBO.TypeID != (int)CalEventType.BankHoliday && Model.CalEventBO.TypeID != (int)CalEventType.ColourDay)
{
<div class="timeOptions line">
<span class="blk_w">Start Time:</span> @Html.DropDownListFor(model => model.CalEventBO.StartHour, Model.HourList) : @Html.DropDownListFor(model => model.CalEventBO.StartMin, Model.MinList)
</div>
}
<br />
<span class="blk_w">End Date:</span> <div class="dateselect line">@Html.EditorFor(model => model.CalEventBO.EndDate)</div>
@if (Model.CalEventBO.TypeID != (int)CalEventType.Holiday && Model.CalEventBO.TypeID != (int)CalEventType.BankHoliday && Model.CalEventBO.TypeID != (int)CalEventType.ColourDay)
{
<div class="timeOptions line">
<span class="blk_w">End Time:</span> @Html.DropDownListFor(model => model.CalEventBO.EndHour, Model.HourList) : @Html.DropDownListFor(model => model.CalEventBO.EndMin, Model.MinList)
</div>
}
@switch (Model.CalEventBO.TypeID)
{
case (int)CalEventType.OnlineDemo:
case (int)CalEventType.BankHoliday:
case (int)CalEventType.ColourDay:
case (int)CalEventType.Roadshow:
//Do not show the day range options or All Day CheckBox
break;
case (int)CalEventType.Holiday:
<br />
<span class="blk_w">Day Range:</span> @Html.DropDownListFor(model => model.CalEventBO.DayRange, Model.DayRangeList)
//Alert will appear here if colour day for user within selected dates
<span class="blk_w"></span><span class="colAlert"></span>
if (Model.MngUserList != null)
{
<br />
<span class="blk_w">Book for Managed User:</span> @Html.CheckBoxFor(model => model.BookForUser)
<div class="mngUsers">
<span class="blk_w">Select User:</span> @Html.DropDownListFor(model => model.MngUserID, Model.MngUserList)
</div>
}
break;
default:
<br />
<span class="blk_w">All Day:</span> @Html.CheckBoxFor(model => model.CalEventBO.AllDay)
break;
}
@if (Model.CalEventBO.TypeID == (int)CalEventType.ColourDay)
{
<br />
<span class="blk_w">Colour:</span>
for (int i = 0; i < Model.Colours.Count; i++)
{
<div class="blk_wn line">
@{string radioID = "colID+" + i;}
@Html.RadioButton("Colour", Model.Colours[i].Colour, Model.Colours[i].Include, new { @id = radioID })
<label for="[email protected]" class="@Model.Colours[i].Colour CalDaySelect" title="">@Model.Colours[i].Colour</label>
</div>
}
<div class="line"><br /><br />
<img src="/Content/Images/help.png" class ="popup" alt="info" />
<div class="popupinfo">
Red - No holidays are allowed to be taken<br />
Amber - The holiday allowance has been reached<br />
Green - Holidays can be booked
</div>
</div>
<br />
<br />
<fieldset>
<legend>Included Access Groups</legend>
<br />
<div>
<div class="scrollCalModal">
@Html.CheckBox("All") <label for="All">All</label>
<br />
<div id="groupSelect">
@for (int i = 0; i < Model.AuthGroupList.Count; i++)
{
<div class="blk_vw line">
@Html.CheckBoxFor(modelItem => Model.AuthGroupList[i].Include, new { id = Model.AuthGroupList[i].ID, @class = "grpcbx" })
<label for="@Model.AuthGroupList[i].ID">@Model.AuthGroupList[i].Name</label>
@Html.HiddenFor(modelItem => Model.AuthGroupList[i].ID)
@Html.HiddenFor(modelItem => Model.AuthGroupList[i].Name)
@Html.HiddenFor(modelItem => Model.AuthGroupList[i].Desc)
</div>
}
</div>
</div>
<br />
<div class="userChanges"></div>
</div>
</fieldset>
}
@Html.HiddenFor(model => model.CalEventBO.ModeratorID)
@if (Model.CalEventBO.TypeID == (int)CalEventType.BankHoliday || Model.CalEventBO.TypeID == (int)CalEventType.ColourDay || Model.CalEventBO.TypeID == (int)CalEventType.Holiday)
{
//Do not show any users
}
else
{
//Allow multiple selections for users
<br />
<br />
<fieldset class="modalFieldset">
<legend>Moderator(s)</legend>
<br />
<div class="scrollCalModal">
@{ int currentTeamID = -1;
for (int i = 0; i < Model.MultiModList.Count; i++)
{
// If the current team ID is not the same then make it the same
if (currentTeamID != Model.MultiModList[i].Team_ID)
{
currentTeamID = Model.MultiModList[i].Team_ID;
// if the item isn't the first close the div
if (i != 0)
{
@:</div>
}
@:<div style="margin-bottom:10px;">
// display the team name
<span class="floatR">
<a href="javascript:void(0)" class="teamcbx line" data-teamid="@Model.MultiModList[i].Team_ID" data-selecttype="all">All</a>
<a href="javascript:void(0)" class="teamcbx line" data-teamid="@Model.MultiModList[i].Team_ID" data-selecttype="none">None</a>
</span>
<strong style="display:block; margin-left:3px; margin-bottom:3px; background-color: #eee;">@(Model.MultiModList[i].Team_Name == null ? "Other" : Model.MultiModList[i].Team_Name)</strong>
}
<div class="blk_wn line">
@Html.CheckBoxFor(modelItem => Model.MultiModList[i].Include, new { id = "modID+" + i, @class = "addmodcbx team" + Model.MultiModList[i].Team_ID })
<label for="[email protected]">@Model.MultiModList[i].ModName</label>
@Html.HiddenFor(modelItem => Model.MultiModList[i].ModID)
<br />
</div>
// If this is the last entry close off the div
if (i == Model.MultiModList.Count - 1)
{
@:</div>
}
}
}
</div>
</fieldset>
}
</fieldset>
@Html.ValidationSummary()
<div class="searchcol_page">
<span class="legendAction">[ <a href="javascript:void(0);" class="cancelBtn">Cancel</a> ]</span>
<input type="submit" class="btn sav" value="Add Event" />
</div>
}
</div>
</div>
腳本從這裏開始，在HTML後。
你通過Ajax加載局部視圖，或者您預渲染它在服務器上？ –
通過ajax @AlexArt。 –
@StephenMuecke我將模型中的剃刀變量傳遞給了部分視圖的模型。它不能在主視圖中。如果您通過ajax $（document）.ready將不會觸發 –