Code is only partially executed

Question

So with this bit of code I want to show an overlay, .mg-show-info. elInfoLink's click function works just as planned. Now I'm supposed to make it's parent clickable as well and since there is another event on that already, I figured I'd do it as you see here. Now by clicking on the parent its child's function is called, and the console.log works, but the overlay is not shown. Why?

var elInfoLink = tile.querySelector('.info-link');
if (elInfoLink) {

    $(elInfoLink).parent().click(function (e) {
        $(elInfoLink).click();
    });

  $(elInfoLink).click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    var mg = document.querySelector('#mg');
    mg.classList.add('mg-show-info');
    mg.dataset.memoryOverlayShowId = tile.dataset.id;
    console.log("foo");
  });
}

I guess it has something to do with your `e.stopPropagation();` inside the code block. It stops event propagation and thereby does not reach the parent. — Swashata Ghosh, Nov 30 '16 at 08:50
Possible duplicate of [does e.stopPropagation() in jquery works on anchor tag](http://stackoverflow.com/questions/8952176/does-e-stoppropagation-in-jquery-works-on-anchor-tag) — Aᴍɪʀ, Nov 30 '16 at 08:53
@SwashataGhosh He will need `e.stopPropagation`. If its removed, you will go in an event cycle from `parent -> child -> parent ...` — Rajesh, Nov 30 '16 at 08:54
Just an advice, keep your approach consistent. Either use `querySelector` or `$`. If you have already loaded jQuery and then you do `querySelector` and then `classList.add`, this is just an overkill. — Rajesh, Nov 30 '16 at 08:56
I think your code works well, you should check if the css for `mg-show-info` is loaded. One advice: keeping the logic code for showing the overlay in the parent click should do the job — kkkkkkk, Nov 30 '16 at 09:10
That was it, thank you @Rajesh yeah I know, but I'm only editing the code and jQuery just comes way easier for me — Gabriel Roda Eugen Bach, Nov 30 '16 at 09:46
@GabrielRodaEugenBach I'm glad I could help. Also, if you are editing code, it means you are the owner of that section and you should use standard approach. Just editing code that you want, will bring lots of issues and dead code. — Rajesh, Nov 30 '16 at 09:59

SinDeus · Answer 1 · 2016-11-30T09:41:10.883

0

EDIT: As @Rory McCrossan pointed out, this is pretty equivalent to your notation; and this works fine.

The method .click() is a shorthand for registering a click event listener on your element. What you want to do is:

$(elInfoLink).parent().click(function (e) {
    $(elInfoLink).trigger('click');
});

edited Nov 30 '16 at 09:41

answered Nov 30 '16 at 08:49

SinDeus

516
1
6
21

This is logically identical to what the OP already has. See http://api.jquery.com/click: `This method is a shortcut for .on("click", handler) in the first two variations, and .trigger("click")` – Rory McCrossan Nov 30 '16 at 08:50

score 0 · Answer 2 · answered Nov 30 '16 at 09:05

0

Well from the limited code, it looks like there is no "partial execution" here. I would re-check if the class mg-show-info is being added to the right element(and if that element is selected properly) and that the relevant CSS is loaded.

answered Nov 30 '16 at 09:05

onkkno

655
6
16

Code is only partially executed

2 Answers2