Question

我正在使用MVC3和Entity Framework。我在页面上有一个列表，其中包含用于选择多个项目的复选框。（目标是一次“重新分配”倍数）。

当用户单击“重新分配”按钮时，它会调用JQuery对话框以显示它并加载局部视图。在局部视图中，我有一个隐藏字段用于选中的复选框。

一个例子是：

<input type="hidden" value="2,4,5" class="tasks" name="tasks" />

但是，我的代码运行得太快，JQuery无法抓取选中的复选框。当我在Firebug中查看对话框HTML时，该值为空。

我通过以下方式测试了我的代码：

    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
    alert(checkeditems);
    $('input.tasks').val(checkeditems);

奇怪的是，这些值被放入隐藏的字段中。没有警报，他们就不在那里。

这是我的Javascript：

$('#ReAssign').bind('click', function (event, ui) {
    GetReassign();
    return false;
});

function GetReassign() {
    $("#ReassignDialog").dialog({
        height: 315,
        width: 525,
        modal: true,
        draggable: false,
        resizable: false,
        open: function (event, ui) {
            $(this).load('/InterviewFollowup/ReassignPartial');
        },
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });

    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
    $('input.tasks').val(checkeditems);
}

以下是我的观点：

@using (Html.BeginForm("ReassignPost","InterviewFollowup")) {
<fieldset>
    <legend><strong>Re-Assign Task</strong></legend>

    <input type="hidden" value="" id="tasks" class="tasks" name="tasks" />

    <div class="editor-label">
        Location:
    </div>
    <div class="editor-field">
        @Html.DropDownList("MailCodes", (SelectList)ViewBag.MailCodes,"-- Select --")
        @Html.ValidationMessage("MailCodes") 
    </div>

    <br />

    <div class="editor-label">
        @Html.LabelFor(model => model.AssignedTo)
    </div>
    <div class="editor-field">
        <select name="AssignedTo" id="AssignedTo"></select>
    </div>

    <div class="editor-label">
        Notes:
    </div>
    <div class="editor-field">
        <input type="text" name="Notes" id="Notes" />
        @Html.ValidationMessage("Notes") 
    </div>

    <p>
        <input type="submit" value="Submit" />
        <input type="button" value="Cancel" />
    </p>

</fieldset>
}

Answer 1

.load() jQuery函数是异步的（它是一个AJAX调用），所以这段代码：

var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
$('input.tasks').val(checkeditems);

在加载部分视图之前运行，因此您的$('input.tasks')选择器与元素不匹配 - 添加警报会修复此问题，因为它会延迟下一行的执行，直到之后> AJAX调用已完成。您希望将代码移动到.load()完成时的回调函数中，如下所示：

$(this).load('/InterviewFollowup/ReassignPartial', function() {
    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
    $('input.tasks').val(checkeditems);
});

Answer 2

我猜你在完成加载之前正在访问一些DOM元素。我会包装你的代码准备好文件

$(function(){

   $('#ReAssign').bind('click', function (event, ui) {
       GetReassign();
      return false;
   });

});

http://api.jquery.com/ready/

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

从上页，

这是第一个了解jQuery的事情：如果你想要一个事件在你的页面上工作，你应该在$（document）.ready（）中调用它功能。加载DOM后，它内部的所有内容都会加载并且在加载页面内容之前。

MVC JQuery太快加载了

2 个答案: