0

如果您单击 li 中的任何位置，我正在尝试运行一个函数，特定按钮除外（在这种情况下会发生其他事情）。似乎我应该使用 .not 或 :not，但尝试以下任何一种都会导致错误并阻止函数的执行。

编辑：添加jsfiddle Demo 代码遵循 Blender 的建议，通过切换 live>on 并使用他的语法，但这并没有解决问题。

Javascript：

$('#currentThread').on('click', 'li:not(.chromeElement)', function () {
    $(this).find('.hiddenChrome').slideToggle();
});

HTML：

<div id='thunderdome'>
    <section id='middle'>
        <ul id='currentThread'>
            <li class="c1L9zObS">
                <article>
                    <img src="http://www.gravatar.com/avatar/ae7238730d03d6da0df35cd8a96ee4dc?d=identicon" class="userPic">
                    <p class="body">foo reply to op</p>
                </article>
                <p class="byline">By <span class="user">raurus</span><span class="timestamp">; Posted a while ago</span><span class="context">2 Tangents</span>
                </p>
                <div class="hiddenChrome" style="display: none;">
                    <div class="chromeElement star">
                        <p>Star</p>
                    </div>
                    <div class="chromeElement report">
                        <p>Report</p>
                    </div>
                    <div class="chromeElement delete">
                        <p>Delete</p>
                    </div>
                    <div class="chromeElement edit">
                        <p>Edit</p>
                    </div>
                    <div class="chromeElement vote unvoted isLoggedIn"></div>
                </div>
                <hr>
            </li>
        </ul>
    </section>
</div>

目标是您可以单击 li 上的任意位置，它会展开以向您显示 .hiddenChrome

问题是单击 .chromeElement 会导致第一个函数执行并且 .hiddenChrome 切换回来。我想让它点击任何东西/但是/ .chromeElement 会导致函数执行。

我不想使用 .slideDown() 因为切换是一种期望的行为。

4

2 回答 2

4

您的前两个示例没有右括号：

$('li').not('.chromeElement').live('click', function(){
  foo
});
 ^


$('li:not(.chromeElement)').live('click', function(){
  foo
});
 ^

此外，.live()已在 jQuery 1.9 及更高版本中删除。将其替换为.on()：

$(document).on('click', 'li:not(.chromeElement)', function() {
    foo();
});

更改document为最近的非动态创建的父元素的选择器。

于 2013-04-26T19:49:24.350 回答
1

您可以on像这样使用与问题匹配的更简洁的委托

$('#currentThread').on('click', 'li:not('.chromeElement)'), function(){ 
    foo();
});

但是，您要问的是当事件发生在孩子身上时停止父母身上的事件。我认为你需要做两件事：

  1. 如果您排除子项，则该事件仍将在父项及其占用的任何“空间”（包括其子项）上触发，因此在您要排除的项上放置一个事件处理程序，并在事件触发时将其排除在逻辑上
  2. 使用逻辑来检测事件开始于哪个项目并终止处理程序。

像这样：

     $('#currentThread').on('click', 'li, .chromeElement', function (e) {
         var $this = $(this);
         if ($this.closest('.chromeElement').length > 0) {
         // if the click occurs on a chromeElement member then bail
             return false;
         } else {
             $this.find('.hiddenChrome').slideToggle();
         }
     });

你的小提琴修改了

于 2013-04-26T21:47:03.143 回答