1

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

前もって感謝します

4

1 に答える 1

3

The problem is that you subscribe on the #bnNextPage click event when the document is ready but in your ajax success you replace the part of the DOM where #bnNextPage was originally. So your click subscription is now loger active, that's way it only works if you haven't searched yet.

To make it work you need to resubscribe on the click event in the ajax success:

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

Or as far more better solution: JQuery offers "durable" subscription with the live method. If you modify your original click code:

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

to

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

It will work without modifying your success callback.

Please note that as JQuery 1.7 the live method is deprecated and you should use the on method instead. In your case the subscription looks like the following with on:

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