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中，因此您沒有得到任何匹配的結果。因此，您需要使用.closest導航到包含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); 
});