jQuery不一致のテキスト（）val（）選択と入力の入力

Question

$nameと$idはほんの一部だけ正しくコピーされます。選択は入力#user_searchに入力されると予想されますが、選択は未定義となります。テキストはランダムのように思える何で正しくコピーされています...

HTML

<input type="text" name="user" id="user_search" autocomplete="off" 
class="user_live form-control" data-parsley-required="true" value="" /> 
<div id="user_result"></div> 

HTML DOM追加

へ

<div id="user_result" style="display: block;">  
    <div class="showResult row"> 
     <div class="box-body"> 
      <a class="user_id" id="353"> 
       <div class="col-lg-3 col-md-3 col-xs-3"> 
        <img height="50px" src="/assets/user_1.jpg">    
       </div> 
       <div class="col-lg-9 col-md-9 col-xs-9"> 
        <span class="name">First Last</span> 
       </div> 
      </a> 
     </div> 
    </div> 
    <div class="showResult row"> 
     <div class="box-body"> 
      <a class="user_id" id="200"> 
       <div class="col-lg-3 col-md-3 col-xs-3"> 
        <img height="50px" src="/assets/user_2.jpg">    
       </div> 
       <div class="col-lg-9 col-md-9 col-xs-9"> 
        <span class="name">First Last</span> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 

JS

$('#user_result').on('click',function(e){ 
    var $clicked = $(e.target); 
    var $name = $clicked.find('.name').text(); //removed .html($name) 
    alert($name); 
    $('#user_search').val($name); 
}); 

Answer 1

この問題は、e.targetと.find()というレイアウトではうまくいかないという問題があります。これを試してみてください：

$('#user_result').on('click',function(e){ 
    var $name = $(e.target).closest('.showResult').find('.name').text(); 
    alert($name); 
    $('#user_search').val($name); 
}); 

https://jsfiddle.net/feab9ms0/

Answer 2

あなたは$nameを初期化していませんここに割り当てる前にhtml($name).text()、 hは決定を未定義とします。

Answer 3

クリックイベントがトリガされると、実際のターゲットはimgタグとないdivそのものです。 .nameクラスの要素はimgに含まれていないため、結果が一致しません。したがってを使用して、imgタグを含む親タグのうちの最小のものに移動する必要があります。

$("#user_result").on("click",function(e){ 
    var $clicked = $(e.target); 
    var $name = $clicked.closest(".box-body").find('.name').text(); 
    alert($name); 
    $('#user_search').val($name); 
});