CODEWITHSUNDEEP
javascriptmeteoronclickevent-handling
SirBT
SirBT

Reputation: 1698

Why isnt my click event handler working?

This is frustrating! I cant get my click event handler to work. I have spent hours on trying to figure out what the issue is but failed.

Below is my template code:

<template name="ViewStats">
<div class="tileMenu" > </div>
</template>

The tileMenu has an embedded image, large enough to be clickable. I even tried replacing the embedded image with larger images in hope to increase the clickable area, but nothing seems to make any difference.

Following is my css:

.tileMenu{
    position: absolute;
    left: 115px;
    z-index: 2;
    height: 49px;
    background: url(images/tileMenu.png) no-repeat;
    top: 1px;
    display: block;
    height: 24px;
    margin-left: 1PX;
    margin-top: 2px;
    float: left;
    width: 17px;
    background-repeat: no-repeat;
    background-position: right 4px top 3px;
    background-size: 75% 75%;
}

And now for the event handlar which fails to fire up. What am I doing wrong?

Template.ViewStats.events({

     'click .tileMenu': function (event) {

      alert("You clicked tileMenu"); 
        }   
 });

Can someone kindly explain why my alert function fails to fire up?

Thanks in advance!

Upvotes: 0

Views: 290

Answers (2)

Adam Moisa
Adam Moisa

Reputation: 1383

A div with no content is 'hard to click'. Put some content in there so you can make sure you're really clicking on the div. Try adding text and testing. Alternatively try putting the image in actual HTML instead of background

Upvotes: 1

Sean
Sean

Reputation: 2729

Your template event code is fine, it should be working.

Because of that, I think the reason your actual event isn't happening is because your click isn't registering on the div you are targeting.

This may be due to the fact that the div is positioned weirdly or under another div. Try removing all your styles and clicking the div. Also try inspect the element to see where the actual tileMenu div is on your page.

Temporarily put some content in the div as a visual test. So you know where you are clicking is the div. Example:

<div class="tileMenu" > CLICK ME CLICK ME CLICK ME </div>

I suspect once you remove the styles or locate where the div is and click it you will see your alert fire.

Upvotes: 2

Related Questions