Question

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

另一方面，如果结果在多个页面上，当用户单击“下一步”按钮时，没有任何反应。知道如果在单击“搜索”按钮之前单击“下一步”按钮，则会触发我的点击事件。

“下一步”按钮位于_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);
            }
        });
}

提前致谢

Answer 1

问题是您在文档准备就绪时订阅了#bnNextPage点击事件，但是在您的ajax成功中，您替换了最初#bnNextPage的DOM部分。所以你的点击订阅现在已经活跃了，这种方式只有在你还没有搜索的情况下才有效。

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

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"); });

获取json数据后，Jquery单击事件未触发

1 个答案: