不一致的text() val()选择和填充输入

jQuery Inconsistent text() val() selection and populating input

本文关键字：填充 输入 选择 val 不一致 text      更新时间：2023-09-26

$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>

添加到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);
});

问题在于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/

当click事件被触发时，实际的目标是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);
});

在赋值html($name).text()之前没有初始化$name，

相关文章：