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

Question

I have 2 click events on one element (button). The first is a default function to do some general checks (which are be done on general steps in my proces) and the second one is a specific check for that specific step in my proces.

All the steps in my proces have a next button to go to the next step (next page), but if a step need specific checks (field validation), I give the <div> around it an extra class, so I can handle it with jQuery.

Default step next button

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

Specific step next button

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

When I click the button on a step with an extra class around it, both functions are running. Is it possible to only run the "specific next button function" then?

Answer 1

Test if the parent has the specific step, from inside the single generic click handler attached to all .next-button :

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

An alternative is to use e.stopImmediatePropagation() , but this solution requires your "specific" handlers to be attached first as they execute in the order they are attached:

eg

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

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

Answer 2

Add a new class to the specific elements (eg specific-step)

Default Button

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

Specific Button

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

And your jquery:

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

Answer 3

Since you want entirely separate functionality for each type of link, I would identify each type of link with a distinct class.

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

Keep your CSS styles in next-button , then attach event handlers to default-step and specific-step .

Then you can avoid:

1. Hard coding CSS classnames into your event handlers
2. Embedding different functions into a single function using if ... else

My gut says this design will be easier to change in future.

edit: If only one of these buttons is ever present on a page, perhaps using an ID instead of a class makes more sense. Just a thought.

Answer 4

Try this. the ">" makes sure you bind the click function to the child of "specific-step".

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