jquery .click() function on specific attribute, returns multiple elements

Question

I have a problem with jquery and the .click() function, when clicking on a <li data-link-url="..."> element, that shares the data-link-url attribute.

This is my HTML structure:

<nav class="fullListHover">
  <ul>
    <li class="oneHub">
      <a href="... /suppliers/technology.html"></a>
      <ul>
        <li data-link-url="... /templateA.html">
          <ul>
            <li data-link-url="... /templateB.html"></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>       
</nav>

And this is my jquery click() function:

<script type="text/javascript">
  $("[data-link-url]").click(function(){
      window.location.href=$(this).attr("data-link-url")
  });
</script>

When I click on the li-tag with ".../templateB.html" I get redirected to ".../templateA.html". So I debugged the whole thing and logged the $(this) variable. When I clicked on ".../templateB.html" the output was:

.../templateB.html
.../templateA.html

It seems like, the .click() function runs a second time.

How can I select just the templateB or prevent the click function to run a second time ?

P.S.: I hope my question is understandable. English isn't my primary language.

Not an exact duplicate, but there are likely others: stackoverflow.com/questions/387736/… — fdomn-m
– fdomn-m, Commented Nov 14, 2016 at 17:22
I must have looked for the wrong keywords, because I didn't find any suitable answer for my problem. Thank you though! — Daniel Stecura
– Daniel Stecura, Commented Nov 15, 2016 at 9:16

Rory McCrossan · Accepted Answer · 2016-11-14 17:19:40Z

3

Your issue is because you have nested li elements with the data-link-url attribute, hence the click handler is invoked once for each element in the hierarchy as the event bubbles up the DOM. To fix this, call stopPropagation() in the event handler:

$("[data-link-url]").click(function(e) {
    e.stopPropagation();
    window.location.href = $(this).data('link-url');
});

answered Nov 14, 2016 at 17:19

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fdomn-m Over a year ago

Sample fiddle with stopPropagation - remove the line to see the event bubble: jsfiddle.net/7wto6hrh

Daniel Stecura Over a year ago

Just out of curiosity: why using .data() instead of .attr() ? Is it because of IE problems with .attr() ?

Rory McCrossan Over a year ago

In most cases it's faster as it's using jQuery's internal cache instead of accessing the DOM.

Collectives™ on Stack Overflow

jquery .click() function on specific attribute, returns multiple elements

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related