Question

我使用以下代码让jQuery处理选项的单击并将该值放在字段中。除了我在标签中的部分之外，代码可以正常工作。我无法弄清楚为什么大胆标记中的部分在点击时没有做任何事情，而后面的文字也是如此。

这是HTML：

<div id="result" style="display: block;">
 <div class="show" align="left">
  <b>This text doesn't work when clicked</b> 
  This text works when clicked
 <span class="name" align="left">113096G</span>
</div>

这里是jQuery：

// When clicking an option, the value populates the #projectsearchid field  
jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    $('#projectsearchid').val($name);
});

可能有更简单的方法来实现这个目标吗？

Answer 1

var $name = $clicked.parent().find('.name').html();

find（）：描述：获取当前集合中每个元素的后代匹配的元素，由选择器，jQuery对象或元素过滤。

因此，该方法将在<b></b>内查找类名为name的元素..当然，它不会找到任何内容，因为在这种情况下，类名为name是sibling，而不是child。您会注意到，如果添加.parent()

，它会找到一些内容

DEMO

$('#result').on('click',function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.parent().find('.name').html();
    //$('#projectsearchid').val($name);
    alert($name);
});

Answer 2

首先，不推荐使用jquery.live，你应该使用jquery.on。你的代码不起作用的原因是因为当你点击b元素时，e.target与div＃results相关联而不是div＃result。当你打电话时：

$clicked.find('.name').html();

它无法找到span.name，因为该元素没有该类的子元素。当你点击时也会发生同样的情况。而是做

$clicked.parent('#result').find('.name').html();

应该能满足您的需求。

如何使用jQuery单击和选项并让它填充一个字段

2 个答案: