DOM element exists, jQuery can't manipulate it

Question

I have this event handler, and I can log the DOM element, but I can't do anything with it. Setting the display or anything doesnt have any effect.

 Template.layoutTemplate.events({
   'mouseover .top_nav_button': function(ev){
    ev.preventDefault();


    console.log($(this).css('padding'));

    $(this).css('display', 'none');

}

});

Here is the template code:

<template name = 'layoutTemplate'>
    <div id = 'top_nav'>
        {{> loginButtons}}
        <a class='top_nav_button' id = 'about_snipex_button' href="{{pathFor 'about'}}">About Snipex</a>
        <a class='top_nav_button' id = 'become_verified_button' href="{{pathFor 'verified'}}">Become Verified!</a>
        <a class='top_nav_button' id = 'terms_button' href="{{pathFor 'terms'}}">Terms&Conditions</a>
    </div>
    <h1 id='layout_header'><a id = 'home_button' href="{{pathFor 'home'}}">snippetExchange</a></h1>
    <div id='layout_header_row_2'>
        <h2 id='layout_by_line'><a id = 'home_button' href="{{pathFor 'home'}}">valuable answers</a></h2>
    </div>
    <div id='sub_nav'>
        <a class='sub_nav_button' id = 'notifications_button' href="{{pathFor 'notifications'}}">notifications</a>
        <a class='sub_nav_button' id = 'my_history_button' href="{{pathFor 'user_profile' _id=currentUser}}">my history</a>
        <a class='sub_nav_button' id = 'new_post_button' href="{{pathFor 'new_post'}}">new post</a>
    </div>
    {{> yield}}
</template>

score 2 · Answer 1 · answered May 21 '15 at 21:23

2

There is no value for the display rule as hidden.

Change it to $('#top_nav').css('display', 'none');

Hidden is the property of the visibility rule in css.

answered May 21 '15 at 21:23

Stafie Anatolie

358
2
12

that was my hacking around...check the code sample up there now – redress May 21 '15 at 21:29
im getting `Uncaught TypeError: Cannot use 'in' operator to search for 'padding' in undefined` ... the element has property padding in my stylesheet – redress May 21 '15 at 21:29
You are probably getting that error because $this element is not what you are expecting. Try do a console.log($this) to make sure what you've got there. – Stafie Anatolie May 21 '15 at 21:31

score 0 · Answer 2 · answered May 21 '15 at 21:26

0

Use hide():

$('#top_nav').hide();

answered May 21 '15 at 21:26

freethinker

2,257
4
26
49

score 0 · Answer 3 · answered May 23 '15 at 19:12

Event listeners take two parameters: event and template

You can find the element you're looking for by doing:

'mouseover .top_nav_button': function(event, template){
  event.preventDefault(); // likely not needed
  template.$('#top_nav').hide();
  // OR
  template.$('#top_nav').css('display', 'none');
}

If you need to target the element that the event was triggered on, use:

'mouseover .top_nav_button': function(event, template){
  event.preventDefault(); // likely not needed
  var elem = event.target;
  template.$(elem).hide();
}

DOM element exists, jQuery can't manipulate it

3 Answers3