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

Question

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

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

“下一步”按钮位于 _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 成功中重新订阅 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"); });