jquery grabbing all items from dom class, with stopPropagation already implemented

Question

I have an issue at:

https://jsfiddle.net/codyc54321/2w0ymou7/

it is hard to see from the fiddle, but when I click on one of the pink boxes the url is http://fake-factory.readthedocs.org/en/latest/providers/internet.htmlhttps://media.readthedocs.org/pdf/factoryboy/latest/factoryboy.pdf , or http://fake-factory.readthedocs.org/en/latest/providers/internet.html + https://media.readthedocs.org/pdf/factoryboy/latest/factoryboy.pdf .

Based on an earlier issue, I tried to stop propagation through the page several ways, last of which were:

$('a').click(function(e){
  e.stopPropagation();
});

$('div').click(function(e){
  e.stopPropagation();
});

$('.article-link').click(function(e){
  e.stopPropagation();
});

the problem is relating to:

   $('.article-link').on('click',function(e){
      window.location = $( "article" ).find( ".url-text" ).text();
  });

which is nice that it grabs links, but if I had 5 links on the page, it will concatonate all 5 into 1. I tried to turn each box into a link to the specific article url to make it easy to use. Why is "stopPropogation" broken in this case? Thank you

Answer 1

What is happening is it is collating all the text from all your .article-link rather than trying with this div that is clicked

//your code with $('article')
$('.article-link').on('click',function(e){
    window.location = $( "article" ).find( ".url-text" ).text();
});

use $(this) instead

$('.article-link').on('click',function(e){
   window.location = $( this ).find( ".url-text" ).text();
});

Should do the trick...

***** oh yes and remove the extra click listeners

$('a').click(function(e){
    e.stopPropagation();
});

$('div').click(function(e){
    e.stopPropagation();
});

$('.article-link').click(function(e){
   e.stopPropagation();
});

Cheers

Joy