jQuery Mobile绑定事件

Question

我在使用jQuery Mobile时遇到了一个问题。每次我的页面被调用时，这个函数都会运行。

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

问题是每当我的页面被查看时，都会增加我的ajax调用次数... 例如：如果页面被查看5次，则下一次将执行相同的ajax请求6次。

我正在使用asp.Net MVC 4。

完整代码：

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

- Paulo Mendonça

---

你能发布更完整的代码吗？ - Jasper

Answer 1

通常出现这种情况是因为你在另一个事件处理程序内绑定了一个事件处理程序。例如，如果你在 pageshow 事件处理程序内绑定了一个 pagechange 事件处理程序。

此外，如果你想要绑定特定页面的页面事件，你可以直接绑定到 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

- Jasper