Аякса OnClick слушатель не работает

Question

У меня есть страница, которая содержит много li и каждый li имеет OnClick слушателя, как это:

<?php while ($row = $allFoods->fetch()) { ?> 
     <li onclick="selectFood(' <?php echo $row['Name']; ?> ')"> 
      <?php echo $row['Name']; ?> 
     </li> 
    <?php } ?> 

, который работает хорошо, как ожидалось

У меня есть кнопка поиска, когда пользователь нажимает его, я хочу получить данные из базы данных, используя ajax, и для каждого элемента данных я хочу поместить его в li и применить к нему прослушиватель onclick. Я работал так:

$(document).ready(function() { 
    $("#searchButton").click(function(){ 
     var foodToSearch = $("#foodToSearch").val(); 
     $.getJSON("http://localhost/TheEatTel/Food/search/"+foodToSearch+"/TRUE",function(data){ 
      var results = ''; 
      for(var i=0;i<data.length;i++){ 
       results +='<li onclick="selectFood('+ data[i] +')">'; 
       results+=data[i]; 
       results+='</li>'; 
      } 
      alert(results); 
      $(".afflFoods").html(results); 
     });  
    }); 
}); 

данные показывает хорошо, как ожидалось, но OnClick слушатель не работает, я имею в виду, когда я нажимаю на любой новый элемент (который приходит из базы данных, не используя AJAX) ничего не произошло, почему пожалуйста ? какое решение, спасибо за консультацию

Answer 1

Вы можете прикрепить слушателя к li с этим -

$(document).on('click','li.selectFood',function(e){ 

      // do stuff that you'd do in selectFood() 
      selectFood($(this).html()); 
}); 

За то, что вам нужно selectFood как класс, закреплённым на каждом Li -

<?php while ($row = $allFoods->fetch()) { ?> 
     <li class="selectFood"> 
      <?php echo $row['Name']; ?> 
     </li> 
    <?php } ?> 

Таким образом, вы не должны повторно подключить прослушиватель событий к новым добавленным li элементам из ajax. В Ajax вы можете просто сделать -

 .... 
     for(var i=0;i<data.length;i++){ 
      results +='<li class=selectFood>'; 
      results+=data[i]; 
      results+='</li>'; 
     } 
     ... 

Answer 2

Вы не указали строку, которую вы передаете, selectFood.

'<li onclick="selectFood(\''+ data[i] +'\')">';