Jquery click event not firing after getting json data

Question

I'm working on an Asp.Net MVC3 application, using jQuery. On a specific page, the user is invited to enter the telephone number to search for a company. So, there is a result (_Result partial view) whitch I get by using json when clicking on the Search button.

On an other part, if the result is on multiple pages, when the user click the "Next button", nothing happen. Knowing that if I click on the Next button before clicking on the Search button, I have my click event fired.

The Next button is in the _Result partial view.

Here's my code 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>

In the _Result partial view

<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>

Here's my JS code :

<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>

My "doReverseSearch" method in an other JS file

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

Thanks in advance

So, success is not being called or $('#result').replaceWith(data); is not working? Test with a debugger(firebug or chrome debugger) if success is called. — Ando
– Ando, Commented Jul 14, 2012 at 17:47

nemesv · Accepted Answer · 2012-07-14 18:01:53Z

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

answered Jul 14, 2012 at 18:01

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jim tollan Over a year ago

+1 - saw the live() part initially and thought -argh, but then say the .on() and thought, nicely explained :)

bob Over a year ago

With JQuery 1.8, attaching events to document by on() allows my events to work all the time, thanks

Collectives™ on Stack Overflow

Jquery click event not firing after getting json data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related