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: http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — freedomn-m, Nov 14 '16 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, Nov 15 '16 at 09:16

score 3 · Accepted Answer · answered Nov 14 '16 at 17:19

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 '16 at 17:19

Rory McCrossan

331,213
40
305
339

1

Sample fiddle with `stopPropagation` - remove the line to see the event bubble: https://jsfiddle.net/7wto6hrh/ – freedomn-m Nov 14 '16 at 17:21
Just out of curiosity: why using .data() instead of .attr() ? Is it because of IE problems with .attr() ? – Daniel Stecura Nov 15 '16 at 09:35
In most cases it's faster as it's using jQuery's internal cache instead of accessing the DOM. – Rory McCrossan Nov 15 '16 at 09:36

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

1 Answers1