jQuery Mobile的绑定事件 [英] jQuery Mobile bind events

问题描述

我有jQuery Mobile的一个小问题。总是我的页面调用此函数运行。

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

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

问题是，我的每个网页被认为是时间增加的时间我的AJAX叫...例如：如果页面中查看5次，下一次将[执行​​相同的Ajax请求的6倍。

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.

我使用MVC asp.Net 4。

I'm using asp.Net MVC 4.

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

推荐答案

通常，这是因为你要绑定的另一个事件处理程序中的事件处理程序。例如，如果你是一个 pageshow 事件处理程序内绑定 pagechange 事件处理程序。

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

更新

我刚才看到你的答案更新与额外的code和你的问题的是您绑定在另一个​​事件处理的事件处理程序。基本上每个 pagechange 事件被触发时，一个新的事件处理程序绑定到＃NAME 元素。

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.

试试这个：

$(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 元素，这样的事件处理程序将一劳永逸时间绑定绑定。

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.

文件为 .delegate（）： http://api.jquery.com /委派

这篇关于jQuery Mobile的绑定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！