无法在移动浏览器上绑定jquery移动动态列表中的事件

时间:2012-06-08 17:55:02

标签: jquery jquery-mobile

我正在开发一个相对简单的jQuery移动网站,它通过AJAX调用与我的服务器交互,然后根据返回的值更新列表视图。动态更新工作正常,但click事件似乎没有绑定到移动浏览器上的动态列表项。 (Android和iOS中的结果相同)但在桌面上的Chrome,Firefox和Safari都可以正常使用。

这是填充我的列表的代码(这适用于桌面和移动设备):

$('#searchfield').keypress(function(e) {
    if( $(this).val().length > 3 ) {
        $.getJSON('admin.php?request=search&srch_email=' + $(this).val(), function(data) {
            if( data.status == 'success' ) {
                 $('#results').empty();
                 $.each(data.data, function(count,user) {
                 $('#results').append('<li><a href="#profile_' + user.uid + '" class="profile">' + user.first_name + ' ' + user.last_name + ' (' + user.email + ')</a></li>');
                     $('#results').listview('refresh');
                     users[user.uid] = user;
                 });
             }
        });
     }
     else if($(this).val().length == 0 ) {
         $('#results').empty();
     }
});

绑定我最初尝试过的事件:

$('.profile').live('click', function(e) {
    e.preventDefault();
    var parts = $(this).attr('href').split("_");
    var user = users[ parts[1] ];

    $('#pheader').html('Edit User ' + user.email );

    $('#fname').val(user.first_name);
    $('#lname').val(user.last_name);
    $('#zip').val(user.zipfirst);
    $('#state').val(user.state);

    $('.uid').val(user.uid);

    $.mobile.changePage( $('#profile') );
    $('#searchfield').val("");
    $('#results').empty();

});

这不起作用所以我读到.live()可能无法在移动设备上正常工作,.on现在是首选方法。我将上面的第一行更改为:

$('#results').on('click',".profile", function(e) {

虽然结果相同。

编辑当我说它失败时,按钮根本就没有响应。没有控制台错误,只是它不是一个可点击的按钮。

2 个答案:

答案 0 :(得分:0)

我找到了答案。改变

$('#results').on('click',".profile", function(e) {

$('#results').on('vclick',".profile", function(e) {

在手机上解决了这个问题。

答案 1 :(得分:0)

您可以尝试使用onclick功能..

$('#searchfield').keypress(function(e) {
if( $(this).val().length > 3 ) {
    $.getJSON('admin.php?request=search&srch_email=' + $(this).val(), function(data) {
        if( data.status == 'success' ) {
             $('#results').empty();
             $.each(data.data, function(count,user) {
            var param = "'"+ user.uid +"'";
             $('#results').append('<li><a href="#" class="profile" onclick="testFunction('+ param +')">' + user.first_name + ' ' + user.last_name + ' (' + user.email + ')</a></li>');
                 $('#results').listview('refresh');
                 users[user.uid] = user;
             });
         }
    });
 }
 else if($(this).val().length == 0 ) {
     $('#results').empty();
 }

});

在testFunction中,

function testFunction(userID){

   var user = users[ userID ];

   $('#pheader').html('Edit User ' + user.email );

   $('#fname').val(user.first_name);
   $('#lname').val(user.last_name);
   $('#zip').val(user.zipfirst);
   $('#state').val(user.state);

   $('.uid').val(user.uid);

   $.mobile.changePage( $('#profile') );
   $('#searchfield').val("");
   $('#results').empty();
}