1

我正在使用 jQuery 开发 Asp.Net MVC3 应用程序。在特定页面上，邀请用户输入电话号码以搜索公司。因此，单击“搜索”按钮时，我使用 json 得到了一个结果（_Result 部分视图）。

另一方面，如果结果在多个页面上，当用户单击“下一步”按钮时，什么也没有发生。知道如果在单击“搜索”按钮之前单击“下一步”按钮，则会触发单击事件。

Next 按钮位于 _Result 局部视图中。

这是我的代码 HTML / Razor ：

<div>
<div>
    <span>Téléphone ?</span>
    <input id="idTxTel" type="text" name="txTelephone"/>

    <input id="idBnSearch" type="submit" value="Chercher" name="bnSearch"/>
</div>

@Html.Partial("_Result", Model)
</div>

在 _Result 局部视图中

<div>
    <span>Page N sur M</span>
     <input id="bnPreviousPage" type="submit" value="Précédant" name="bnPrevious"/>
     <input id="bnNextPage" type="submit" value="Suivant" name="bnNext"/>
</div>

这是我的 JS 代码：

<script type="text/javascript">
$(document).ready(function () 
{
    $("#idBnSearch").click(function () 
    {
        var telValue = $("#idTxTel").val();
        var methodUrl = '@Url.Content("~/Search/GetReverseResult/")';

        doReverseSearch(telValue, 0, methodUrl);
    });

    $("#bnNextPage").click(function (e) 
    {
        alert("Next cmd");
    });
});
    </script>

我在另一个 JS 文件中的“doReverseSearch”方法

function doReverseSearch(telValue, pageIdx, methodUrl) 
{

    $.ajax(
        {
            url: methodUrl,
            type: 'post',
            data: JSON.stringify({ Telephone: telValue, pageIndex: pageIdx }),
            datatype: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('#result').replaceWith(data);
            },
            error: function (request, status, err) {
                alert(status);
                alert(err);
            }
        });
}

提前致谢

4

1 回答 1

3

问题是您在文档准备好时订阅了click 事件，但是在您的 ajax 成功时，您替换了原来#bnNextPage的 DOM 部分。#bnNextPage因此，您的点击订阅现在是记录器活动的，只有在您尚未搜索时才有效。

要使其正常工作，您需要在 ajax 成功中重新订阅 click 事件：

success: function (data) {
                $('#result').replaceWith(data);
                $("#bnNextPage").click(function (e) 
                {
                     alert("Next cmd");
                });
         },

或者更好的解决方案：JQuery 使用live方法提供“持久”订阅。如果您修改原始点击代码：

$("#bnNextPage").click(function (e) { alert("Next cmd"); });

到

$("#bnNextPage").live("click", function (e) { alert("Next cmd"); });

它可以在不修改您的success回调的情况下工作。

请注意，作为 JQuery 1.7，该live方法已被弃用，您应该改用on方法。在您的情况下，订阅如下所示on：

$(document).on("click", "#bnNextPage", function (e) { alert("Next cmd"); });
于 2012-07-14T18:01:53.663 回答