jQuery不一致的text（）val（）选择并填充输入

Question

$name and $id are only copied properly a small portion of the time. Selection is expected to populate the input #user_search but selections come up undefined. The text is copied properly at what seems like random...

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 Added to 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

The issue lies with e.target and .find() not working quite right with that layout. Try this:

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

When the click event is triggered, the actual target is the img tag and not the div itself. Since the element with class .name is not contained in the img , you do not get any matching results back. Therefore you need to use the .closest to navigate to the least parent tag which contains the img tag.

$("#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);
});

Answer 3

在分配给此处html($name).text()之前，您尚未初始化$name ，这导致t将该决策呈现为未定义。