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

触发点击事件时，实际目标是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);
});

Answer 3

在分配到此处$name之前，您尚未初始化html($name).text()，这导致决定未定义。

jQuery Inconsistent text（）val（）选择和填充输入

3 个答案: