嵌套 div 上的 jQuery click()

发布于 2024-12-03 08:54:30 字数 516 浏览 2 评论 0原文

该代码可能比我能更好地解释这一点:

<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});
</script>

当我单击 inner1 div 时,它会使用 inner1 运行 do_something() div 和包装器

随着网站的建设,嵌套 div 将会发生很多。是否有一种动态方法来解决此问题并仅运行顶级 div(在本例中为 inner1)?

The code can probably explain this better than I can:

<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});
</script>

When I click on the inner1 div, it runs the do_something() with both the inner1 div AND the wrapper.

With the site being built, nested divs are going to happen a lot. Is there a dynamic way to fix this issue and only run the top level div (in this case inner1)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

楠木可依 2024-12-10 08:54:30

使用 stopPropagation

$('div').click(function(e){
    e.stopPropagation();
    var class_name = $(this).attr('class');
    do_something(class_name);
});

另一方面:您确定这是你想做什么?您可能需要修改选择器 ($('div')) 以仅定位您想要的 DIV。

Use stopPropagation:

$('div').click(function(e){
    e.stopPropagation();
    var class_name = $(this).attr('class');
    do_something(class_name);
});

On the other hand: are you sure this is what you're trying to do? You might want to modify your selector ($('div')) to only target the DIV's you want.

巴黎夜雨 2024-12-10 08:54:30

您需要防止事件冒泡。使用 jQuery,你可以这样做:

$('div').click(function(e)
{
    e.stopPropagation();

    // Other Stuff
});

You need to prevent the event bubbling. With jQuery, you would do this:

$('div').click(function(e)
{
    e.stopPropagation();

    // Other Stuff
});
谈下烟灰 2024-12-10 08:54:30

您的选择器是“div”,因此在单击的每个 div 上都会运行。在此示例中,这包括wrapper、inner1 和inner2。

如果您只想 inner1 触发该函数,您的代码将如下所示:

$('.inner1').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});

You're selector is 'div' so on every single div that is clicked this will run. This includes wrapper, inner1, and inner2 in this example.

If you only want inner1 to fire off that function you're code will look like this:

$('.inner1').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});
ぽ尐不点ル 2024-12-10 08:54:30
<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(ev){
    var class_name = $(this).attr('class');
    do_something(class_name);
    ev.stopPropagation();
});
</script>
<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(ev){
    var class_name = $(this).attr('class');
    do_something(class_name);
    ev.stopPropagation();
});
</script>
风尘浪孓 2024-12-10 08:54:30

事件会一直冒泡,直到您使用 stopPropagation 方法停止它为止:

$('div').click(function(e){
  e.stopPropagation();
  var class_name = $(this).attr('class');
  do_something(class_name);
});

The event bubbles until you stop it with the stopPropagation method:

$('div').click(function(e){
  e.stopPropagation();
  var class_name = $(this).attr('class');
  do_something(class_name);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文