jquery实时搜索不工作[重复]

Question

This question already has an answer here:

• Event binding on dynamically created elements? 23 answers

hii i am creating a live search like this http://demo.phpgang.com/live-search-php-mysql-jquery/ and i am having a small problem in code this

jQuery("#result").on("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded); 

the codes are taken from here http://www.phpgang.com/how-to-integrate-live-search-in-php-and-mysql-with-jquery_309.html

Problem - The problem i am facing is that when i search something it shows results correctly but when i click on result then nothing happens i want that result in input box when i click it. thanks help needed

here is a complete code

index.php

<?php

   $content ='<script type="text/javascript" src="jquery-1.8.0.min.js">             
   </script>
  <script type="text/javascript">
    $(function(){
      $(".search").keyup(function() 
     { 
    var searchid = $(this).val();
    var dataString = \'search=\'+ searchid;
      if(searchid!=\'\')
       {
      $.ajax({
   type: "POST",
    url: "search.php",
     data: dataString,
   cache: false,
 success: function(html)
 {
 $("#result").html(html).show();
 }
});
}return false;    
 });

  jQuery("#result").live("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);
 });
jQuery(document).live("click", function(e) { 
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut(); 
}
  });

  });
      </script>

      <style type="text/css">
 .content{
    width:900px;
    margin:0 auto;
 }
 #searchid
 {
    width:500px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
 }
 #result
 {
    position:absolute;
    width:500px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{
    padding:1px; 

    font-size:15px; 
    height:50px;
}
.show:hover
{
    background:#4c66a4;
    color:#FFF;
    cursor:pointer;
 }

 <div class="content">
  <input type="text" class="search" id="searchid" placeholder="Search for         
  people" /><br /> 
   <div id="result"></div>
  </div>';


   $pre = 1;
  include("html.inc");
   ?>

search.php

 <?php
 include('db.php');
if($_POST)
{
$q = mysqli_real_escape_string($connection,$_POST['search']);
$strSQL_Result = mysqli_query($connection,"select id,name,email from seller    
where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysqli_fetch_array($strSQL_Result))
{
    $username   = $row['name'];
    $email      = $row['email'];
    $b_username = '<strong>'.$q.'</strong>';
    $b_email    = '<strong>'.$q.'</strong>';
    $final_username = str_ireplace($q, $b_username, $username);
    $final_email = str_ireplace($q, $b_email, $email);
    ?>
        <div class="show" align="left">
         <span class="name"><?php echo $final_username; ?></span>&nbsp;<br/>  
     <?php echo $final_email; ?><br/>
        </div>
    <?php
    }
   }
   ?>

</div>

Answer 1

There are few issues with your code. Let's start with

var $name = $clicked.find(\'.name\').html();

Here . is not a valid operator for concatenation in JS. It is used in PHP. To concatenate strings, use +.

Secondly, using \'.name.\' as input to find option. I suppose that name is already a string? You don't need extra escaping of ' unless that is part of echo in PHP. Simply use ' to start a string.

Next is:

var decoded = $("<div/>").html($name).text();

<div/> is not a valid selector. Use div simply.

Check the jsfiddle here for fixed code from your link: https://jsfiddle.net/1mss5xwj/1/