Question

我的AJAX通话存在问题。我有一个包含“showuserinfo”类的按钮的列表，当我点击showuserinfo并返回并再次点击时，AJAX调用不止一次。如果我点击showuserinfo，返回并再次点击，AJAX Call将运行两次。如果我重复这样做，AJAX Call也会重复运行。这是我的代码：

 $('.showuserinfo').live('tap', function(event){
        $.mobile.loading('show');
        var user_id = $(this).children().find('a').attr('id');
        //$('#showprofile').page('destroy').page();
        $('#showprofileImage img').remove();
        $('#showprofileContent div').remove();
        $( document ).delegate("#showprofile", "pagebeforeshow", function() {
         $.ajax({
            type: "POST",
            url: "http://fitness.desigyn.com/func/phonegapApi.php",
            data: { operation: "getSpecificProfile", requested: user_id ,username: 'kurekcifuat', password: '123456' },
            async : false,
            cache : false,
            }).done(function( msg ) {
                if(msg == "fail")
                {
                    alert('error');
                }
                else{
                    var obj = $.parseJSON(msg);
                        alert(msg); // Debugging and that code works more than once
                    $('#showprofileImage img').remove();
                    $('#showprofileContent div').remove();
                    $('#showprofileImage').append('<img class="otheruserpic" style="height:120px !important; width:120px !important;" src="' + obj["0"].picture + '"/>');
                    $('#showprofileContent').append('<div class="otheruserinfo"><b>Username: </b><span>' + obj["0"].username + '</span></div><div><b>Name: </b><span>' + obj["0"].name + '</span></div><div><b>Age: </b><span>' + obj["0"].age + '</span></div><div><b>Gender: </b><span>' + obj["0"].gender + '</span></div>');
                }
            });
            $.mobile.loading('hide');
         });

        });

有什么建议吗？欢呼声。

Answer 1

您遇到多个事件绑定问题。

改变这个：

$('.showuserinfo').live('tap', function(event){

});

到此：

$('.showuserinfo').die('tap').live('tap', function(event){

});

甚至更好地使用这样：

$(document).off('tap', '.showuserinfo').on('tap', '.showuserinfo' ,function(event){

});

详细了解多个事件绑定 here ，搜索章节：防止多个事件绑定/触发。

Answer 2

首先，不推荐在jQuery Mobile中使用.ready()。其次，.live()替换为.on()。

当pagebeforeshow触发时，您的Ajax请求被触发两次。为避免这种情况，请执行以下操作。

首先，修复.live()。

$(document).on('tap', '.showuserinfo', function(event) { });

然后使用以下内容杀死pagebeforeshow的任何先前绑定。

$(document).off("pagebeforeshow", "#showprofile").on("pagebeforeshow", "#showprofile", function () { });

Ajax一个接一个地工作

2 个答案: