0

从 jQuery get() ajax 调用返回后出现问题。响应用其他 div 填充一个 div。这些新的 div 包含“onclick”事件处理程序。浏览器需要单击页面上的任意位置，然后我才能单击新填充的 div 并使其“onclick”触发。

编辑通过从“ajaxSearch”中删除“return false”和从“keypress”中删除“event.preventdefault()”来解决

以下是正在发生的事情的具体情况：

  1. 在“srchKey”文本框中输入一个值，按 Enter
  2. 'ajaxSearch' 函数触发并获取数据。
  3. 'displayResults' 函数成功更新了 'searchResults' div，并且最多 10 个 div's 垂直堆叠在左侧。每个新的 'searchResult' div 都有一个 onclick='resultClick(this, '/Path...', displayRecord)' 设置，其中 '/Path...' 根据数据而变化。
  4. 在“onclick”触发之前，我被迫单击页面上的某个位置（无论在哪里）。
  5. 第一次单击后，我可以再次单击其中一个 searchResult div 并调用“onclick”脚本。

对用户来说，第一次单击“searchResult”div 时，似乎没有任何反应。单击一次后，随后每次单击“searchResult”div 之一都会按预期工作。

这个问题似乎与浏览器无关（至少在 Chrome 和 Firefox 中它做同样的事情的程度）。

我在我的页面中使用以下 jquery 脚本：

function displayResults(data) {
    $('.searchResults').html(data);
    return false;
}

function resultClick(selected, req, callback) {
    $('.searchResult').removeClass('selected');
    $(selected).addClass('selected');
    $.get(req, callback);
    return false;
}

function displayRecord(data) {
    $('#selectedRecord').html(data);
    return false;
}

function ajaxSearch() {
    $('#selectedRecord').empty();
    var myForm = $('#searchForm');
    $.post(myForm.URL, myForm.serialize(), displayResults);
    return false;
}

$(function () {
    $('#loadingDiv').hide();

    $('.watched').blur(ajaxSearch);
    $('#srchDate').blur(ajaxSearch);

    $(document).keypress(function (event) {
        if (event.which === 13) {
            event.preventDefault();
            ajaxSearch();
        }
    });
});

我的剃须刀页面如下所示：

...

<div id="searchPage">
    @using (Html.BeginForm("Index","Controller",FormMethod.Post, new {id="searchForm"}))
    {
        <fieldset>
            <legend>Criteria</legend>
            <div class="search" id="srchKey">
                 @Html.LabelFor(m=>m.Key)
                 @Html.EditorFor(m=>m.Key)
            </div>
        </fieldset>
    }
    <div class="resultsBlock">
        <div class="searchResults" id="unitResults"></div>
        <div id="selectedRecord"></div>
    </div>
</div>

@section scripts
{
    <script src="@Url.Content("~/Scripts/search.js")" type="text/javascript"></script>
}
4

1 回答 1

1

您可以打开 firebug 并切换到 net 选项卡，然后您将查看第一次单击是否有效。您也可以尝试手动添加一个 &lgt;div onclick='resultClick(this, '/Path...', displayRecord)' 以查看它是否有效。

另外，您可以查看firebug中是否有任何js错误。

于 2013-01-08T02:51:18.067 回答