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
});

当我点击一个带有额外类的步骤上的按钮时，两个函数都在运行。是否可以只运行＆＃34;特定的下一个按钮功能＆＃34;然后？

Answer 1

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

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

另一种方法是使用e.stopImmediatePropagation()，但此解决方案需要您特定的＆＃34;处理程序首先附加按照附加顺序执行

e.g。

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

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

Answer 2

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

PIVOT

将您的CSS样式保存在<a class="next-button default-step" ... <a class="next-button specific-step" ...中，然后将事件处理程序附加到next-button和default-step。

然后你可以避免：

将CSS类名硬编码到事件处理程序中
使用specific-step

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

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

Answer 3

试试这个。＆＃34;＆gt;＆＃34;确保将click函数绑定到＆＃34;特定步骤＆＃34;。

的子元素

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

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

3 个答案: