2单击一个元素上的事件，只需要运行一个元素

Question

我在一个元素（按钮）上有2个点击事件。 第一个是默认函数，用于执行一些常规检查（在我的过程中的一般步骤中完成），第二个是对我的过程中特定步骤的特定检查。

我的过程中的所有步骤都有一个下一步按钮进入下一步（下一页），但如果一个步骤需要特定的检查（字段验证），我给它周围的<div>一个额外的类，所以我可以处理它用jQuery。

默认步骤下一步按钮

HTML：

<div>
   <a class="next-button" href="http://www.example.com/to-next-step/">Next step</a>
</div>

jQuery的：

$('.next-button').click(function() {
   // Default checks
});

具体步骤下一步按钮

HTML：

<div class="specific-step">
   <a class="next-button" href="http://www.example.com/to-next-step/">Next step</a>
</div>

jQuery的：

$('.specific-step .next-button').click(function() {
   // Specific checks
});

当我单击一个带有额外类的步骤上的按钮时，两个函数都在运行。 是否可以只运行“特定的下一个按钮功能”呢？

Answer 1

从附加到所有.next-button的单个通用单击处理程序内部测试父级是否具有特定步骤：

$('.next-button').click(function() {
    if($(this).parent().hasClass('specific-step')){
         performSpecificStep();
    }
    else{
        // Do standard stuff
    }
});

另一种方法是使用e.stopImmediatePropagation() ，但是这个解决方案需要首先附加“特定”处理程序，因为它们按照它们所附加的顺序执行：

例如

$('.specific-step .next-button').click(function (e) {
    e.stopImmediatePropagation();
});
$('.next-button').click(function (e) {
});

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/nb6thezu/

Answer 2

向特定元素添加新类（例如，特定步骤）

默认按钮

<a class="next-button" href="http://www.example.com/to-next-step/">Next step</a>

具体按钮

<a class="next-button specific-step" href="http://www.example.com/to-next-step/">Next step</a>

你的jquery：

$('.next-button').click(function() {
    if($(this).hasClass('specific-step')){
         performSpecificStep();
    }else{
      // do normal stuff
    }
});

Answer 3

由于您希望为每种类型的链接提供完全独立的功能，因此我会识别具有不同类的每种类型的链接。

<a class="next-button default-step" ... <a class="next-button specific-step" ...

将CSS样式保存next-button ，然后将事件处理程序附加到default-step和specific-step 。

然后你可以避免：

1. 将CSS类名硬编码到事件处理程序中
2. 使用if ... else不同的函数嵌入到单个函数中

我的直觉说这个设计将来会更容易改变。

编辑：如果页面上只出现其中一个按钮，则使用ID而不是类更有意义。 只是一个想法。

Answer 4

试试这个。 “>”确保将click函数绑定到“specific-step”的子节点。

$('.specific-step > .next-button').click(function() {
   // Specific checks
});