Jquery click не работает в выпадающем меню

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 действительно возвращает div с классом topicResult.

Answer 1

Вы связываете событие click и затем добавляете элементы на страницу после привязки слушателя.Он не сработает.

Два варианта

Вариант 1, использовать прослушиватель, который может привязываться к элементам после отображения страницы

Любое изменениесобытие click для .topicResult для использования «.on ()» для jQuery 1.7+ или «.live () или .delegate ()» для предыдущих версий

 $(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

Вам нужно прикрепить событие click после возвращения результата - где оно есть, вы прикрепляете его ни к чему.

Попробуйте что-то вроде:

 $.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
    }); 
});