jQuery Mobile bind events - PullRequest
Новая
       10

jQuery Mobile bind events

5 голосов
/ 27 февраля 2012

У меня небольшая проблема с jquery mobile.всегда вызывается моя страница, эта функция запускается. 

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

Проблема в том, что каждый раз, когда моя страница просматривается, она увеличивает количество раз, когда вызывается мой ajax ... пример: если страница просматривается 5 раз, следующаявремя выполнит один и тот же запрос ajax 6 раз.

Я использую asp.Net MVC 4.

Multiple ajax requests

Полный код: 

@{
    //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();                       
});

1 Ответ

8 голосов
/ 27 февраля 2012

Обычно это происходит потому, что вы связываете обработчик событий в другом обработчике событий. Например, если вы связывали обработчик события pagechange внутри обработчика события pageshow.

Также, если вы хотите привязать события страницы к определенной странице, вы можете просто привязать элемент data-role="page": 

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

Обновление

Я только что видел ваш обновленный ответ с дополнительным кодом, и ваша проблема заключается в в том, что вы связываете обработчик событий внутри другого обработчика событий. По сути, каждый раз, когда запускается событие pagechange, новый обработчик события привязывается к элементу #name.

Попробуйте это: 

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

При этом используется делегирование события для привязки обработчика события к элементу #name, таким образом, обработчик события будет привязан один раз за все время.

Документы для .delegate(): http://api.jquery.com/delegate

...