jQuery Mobile bind events

Question

I have a little problem with jquery mobile. always my page is called this function runs.

$(document).bind('pagechange', function () { 
  // peforms ajax operations
})

The problem is that each time my page is viewed it increases the times my ajax is called... example: if the page is viewed 5 times, next time will peform the same ajax request 6 times.

I'm using asp.Net MVC 4.

Full code:

@{
    //ViewBag.Title = "Consulta";
    Layout = "~/Views/Shared/_LayoutMenu.cshtml";
}
<div class="ui-body ui-body-b" id="test">
    (...) some html code (...)
</div>
<script>        
$(document).bind('pagechange', function () {
    $('#info').css('visibility', 'hidden');

    $('#name').keypress(function (e) {

        if (e.keyCode == 13) {

            var code = $(this)[0].value;

            $.ajax({
                url: '/Consulta/ObterDadosPulseira',
                data: $(this).serialize(),
                success: function (data) {

                    $('#info').css('visibility', 'visible');

                    var info = $('#info')[0];

                    $('#info [id=gridCod]').html(data[0].cod);
                    $('#info [id=gridName]').html(data[0].nome);

                },
                complete: function () { },
                error: function () { alert('error!'); }
            });

            $(this)[0].value = '';
        }
    });
    $('#name').focus();                       
});

Answer 1

Normally this happens because you are binding an event handler within another event handler. For instance if you were binding a pagechange event handler inside of a pageshow event handler.

Also if you want to bind to the page events for a specific page, you can just bind to the data-role="page" element:

$(document).delegate('#my-page-id', 'pageshow', function () {
    //now `this` refers to the `#my-page-id` element
});

Update

I just saw your updated answer with the extra code, and your problem is that you are binding an event handler inside another event handler. Basically each time the pagechange event is firing, a new event handler is bound to the #name element.

Try this:

$(document).delegate('#name', 'keypress', function () {

    if (e.keyCode == 13) {

        var code = this.value;

        $.ajax({
            url: '/Consulta/ObterDadosPulseira',
            data: $(this).serialize(),
            success: function (data) {

                $('#info').css('visibility', 'visible');

                var info = $('#info')[0];

                $('#info [id=gridCod]').html(data[0].cod);
                $('#info [id=gridName]').html(data[0].nome);

            },
            complete: function () { },
            error: function () { alert('error!'); }
        });

        this.value = '';
    }
}).bind('pagechange', function () {
    $('#info').css('visibility', 'hidden');
    $('#name').focus();                       
});

This uses event delegation to bind the event handler to the #name element, this way the event handler will be bound once for all-time.

Docs for .delegate(): http://api.jquery.com/delegate