Question

我有一个没有列表项的无序列表。

我从用户那里获得了一些信息，我使用AJAX在我的数据库中运行它，服务器发送回JSON对象响应。

然后我使用类似

的内容将我要显示的每个列表项追加到列表中

$('blabla').append('<li>information</li>')

我的问题是，由于在DOM准备就绪时li元素不存在，我如何将click事件绑定到它们？

这是我的完整代码：

$(function(){
var timer;
$('#f').keyup(function(){
    clearTimeout(timer);
    timer = setTimeout(getSuggestions, 400);
    });
})

function getSuggestions(){
var a = $('#f')[0].value.length;
if( a < 3){
    if(a == 0){
        $('#ajaxerror').hide(300,function(){
            $('#loading').hide(300,function(){
                $('#suggest').hide(300)
                })
            })
        }
    return;
    }
$('#loading').slideDown(200,function(){
    $.ajax({
        url: '/models/AJAX/suggest.php',
        dataType: 'json',
        data: {'data' : $('#f')[0].value },
        success: function(response){
            $('#ajaxerror').hide(0,function(){
                $('#loading').hide(100,function(){
                    $('#suggest ul li').remove();
                    for(var b = 0; b < ( response.rows * 3); b = b + 3){
                        $('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>')
                        // MISSING SOME CODE HERE TO BIND CLICK EVENT TO NEWLY CREATED LI
                        }
                    $('#suggest').show(300)
                    })
                })
            },
        error: function(){
            $('#suggest').hide(0,function(){
                $('#loading').slideUp(100,function(){
                    $('#ajaxerror').show(300)
                    })
                })
            }
        })
    })
}

Answer 1

您使用on()

http://api.jquery.com/on/

   for(var b = 0; b < ( response.rows * 3); b = b + 3){
      (function(b) {
         $('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>');
         $('#suggest ul li').on('click', function() { 
            // your function`
         });
       })(b); // this is needed so that your click event has a proper access to variable b just before it changes to b+3
   }

将事件绑定到AJAX填充的列表项

1 个答案: