Javascript $(this)div中标题的jQuery选择器

Javascript $(this)div中标题的jQuery选择器,javascript,jquery,dom,Javascript,Jquery,Dom,我需要在单击的特定div中选择并查找H2标记的html值,这是我现在正在尝试的,但没有用: 单击.square后,我将尝试运行以下操作: $(this).find('h2').html(); 这就是html的外观: <div class="square" id="2"><h2>Title</h2><h3>Comment</h3></div> 我做错了什么 谢谢也许您必须在文档准备好后运行代码 $(function()

我需要在单击的特定div中选择并查找H2标记的html值,这是我现在正在尝试的,但没有用:

单击.square后,我将尝试运行以下操作:

 $(this).find('h2').html();
这就是html的外观:

<div class="square" id="2"><h2>Title</h2><h3>Comment</h3></div>
我做错了什么


谢谢

也许您必须在文档准备好后运行代码

$(function() {
    $(".square").click(function() {
        console.log($(this).find('h2').html());
    });
});
$function{};是编写$document.readyFanton{};的捷径


此外,您的代码必须放在click事件侦听器的回调中。

您的代码必须放在click处理程序中,如下所示:

$('.square').on('click', function() {
    alert($(this).find('h2').html());
}
在click处理程序之外,它指向window和$window。find'h2'找不到任何东西,因此.html产生未定义的结果

如果是动态生成的,则需要将单击处理程序挂接到最近的元素上,该元素不会从页面中消失

$('#element_id').on('click', '.square', function() {
    alert($(this).find('h2').html());
}

更有效的方法是:

$('body').on('click', '.square', function(event) {
  var  html =  $(this).find('h2').html();
  console.log(html);
}); 

您的代码完全正确。您可以在此处或网站上看到应用程序的示例:


你为什么认为你做错了什么?会发生什么?你还必须解释你所面临的问题,而不仅仅是你试图实现的目标。你是否将其分配给变量,附加它,隐藏它?@FelixKling我试图将其设置为变量并提醒它,但它提醒“未定义”,请发布一个更完整的示例,最好带有演示。您发布的代码不足以指出问题。因为您从正文中委托事件,所以它的速度更快。什么更快?事件的处理?它不是必须一直冒泡到body,然后jQuery必须测试它是否起源于.square元素,因此处理速度较慢吗?直接将事件处理程序绑定到元素本身可以避免所有这一切。不,因为它会观察任何在主体上的单击,因此已经在顶部,然后尝试查找。squareEvents分两个阶段处理,捕获和冒泡阶段。jQuery只在冒泡阶段绑定处理程序,因为IE<9或10不支持捕获。看见这意味着,事件处理程序绑定到事件源元素的距离越近,执行的时间就越早。绑定在文档顶部、正文的事件处理程序最后执行。别误会我的意思,我是活动授权的大力倡导者,但在不了解任何上下文和准确定义术语的情况下声称它更有效只是误导。@borisrorsvort它一点也不快。在处理动态元素时,它可以更高效,因为只有一个事件处理程序,不需要太担心,但与每个元素上只有一个处理程序相比,这个单击处理程序发生的事情要多得多。我目前确实有一个单击处理程序,它确实可以工作,它只是返回h2.html的“undefined”:整个html都是使用javascript动态生成的,这会改变什么吗?@Taimur好吧,如果单击处理程序启动,但没有发现任何项目,那么您就完全有不同的问题了。您可能应该与我们共享更多代码。
<script>
$(document).ready(function(){
    $("div#2").click(function(){
        var title = $(this).find('h2').html();
        $("span").text(title);
    });
});
</script>

<div class="square" id="1"><h2>I'll not work because my id is 1</h2></div>
<div class="square" id="2"><h2>Click me and you'll see me below on the span!</h2></div>
<span></span>