Question

我有一个类似于Google的搜索，在用户输入时会显示结果。理想情况下，我希望用户点击其中一个结果，然后值进入搜索框。但是，当我点击结果时，没有任何反应。

HTML：

<input type='text' id='topicInput' name='topic' autocomplete='off' />
<div id='tagResult'></div>  //this is the dropdown

JQUERY：

$('#topicInput').keyup(function(){

        var topic = $(this).val();
        if (topic==''){
            $('#tagResult').css("display" , "none");
        }
        else{
            //$('div').click(function(){
                //$('#tagResult').css("display" , "none");

            //});
            $('#tagResult').css("display" , "block");

                $.post('../topic.php' , {topic: topic} , function(response){

                $('#tagResult').html(response);     
                });
            }
    });
     //the above code is working properly

$('.topicResult').click(function(){
    alert(1);   //this is just a test, but it never shows up
});

所以，当我点击.topicResult时，没有任何反应。应该出现警报。我已经验证了topic.php实际上确实使用topicResult类返回div。

Answer 1

您绑定点击事件，然后在绑定侦听器后向页面添加元素。它不会被解雇。

两个选项

选项1，使用可在呈现页面后绑定到元素的侦听器

更改.topicResult的click事件以使用＆＃34; .on（）＆＃34;对于jQuery 1.7+或使用＆＃34; .live（）或.delegate（）＆＃34;对于以前的版本

 $(document).on('click','.topicResult',function(){
      alert('1');
 )};

选项2，移动点击绑定，使其在添加元素后绑定

 $('#topicInput').keyup(function(){ 

    var topic = $(this).val(); 
    if (topic==''){ 
        $('#tagResult').css("display" , "none"); 
    } 
    else{ 
        //$('div').click(function(){ 
            //$('#tagResult').css("display" , "none"); 

        //}); 
        $('#tagResult').css("display" , "block"); 

            $.post('../topic.php' , {topic: topic} , function(response){ 

            $('#tagResult').html(response);
                $('.topicResult').click(function(){ 
                      alert(1);   //this is just a test, but it never shows up 
                 }); 

            }); 
        } 
});

Answer 2

你需要在结果回来后附加点击事件 - 它在哪里，你将它附加到任何东西。

尝试类似：

 $.post('../topic.php' , {topic: topic} , function(response){

    $('#tagResult').html(response);    

    $('.topicResult').click(function(){
        alert(1);   //this is just a test, but it never shows up
    }); 
});

Jquery点击不在下拉菜单上工作

2 个答案: