Javascript/jQuery Coding Pattern Advice

Question

I'm trying to improve my understanding of javascript/jQuery function patterns. I've been playing with this simple demo in an attempt to get a revealing module pattern working.

Could anyone help me understand why this isn't working? I know that in reality you would solve just using CSS and that there are easy other ways to solve it - what I'm interested in is why my attempted solution doesn't work.

HTML

<body>

<p>Here is a test input element</p>
<form>
    <label>Some label</label>
        <input type="text">
        <button>Click me</button>
</form>

</body>

</html>

jQuery:

$(document).ready(function(){

var roll = (function(){     
      function rollEnter(){
      $("button", this).css("text-decoration", "underline");
      }     
      function rollExit(){
      $("button", this).css("text-decoration", "none");
      }     
    return{
    underlined: rollEnter,
    standard: rollExit
    };
})();


//When I try and call the functions, it doesn't work
    $("button").on('mouseenter', roll.underlined());
    $("button").on('mouseleave', roll.standard());

});

Any advice on what went wrong/how to get this type of pattern working?

You should start by passing a function reference to on instead of the result of executing the function. Also, what does "it doesn't work" mean? Do you see an error on the page? — Andrew Whitaker
– Andrew Whitaker, Commented Jul 23, 2013 at 16:25
try removing the () after underlined and standard. I think what is happening is you are calling the methods immediately rather than on mouseenter/mouseleave — aug
– aug, Commented Jul 23, 2013 at 16:25
@cs_stackX p.s. Kudos for writing Modular JS. I'm not sure if you are already aware of it, but Learning Javascript Module Patterns is an invaluable resource on the topic. — Nick Tomlin
– Nick Tomlin, Commented Jul 23, 2013 at 16:37

Nick Tomlin · Accepted Answer · 2013-07-23 16:43:00Z

4

There are two issues here:

you are invoking your callback functions in your event handlers, instead of allowing the event handler to invoke them.

// roll.underlined is invoked immediately
$("button").on('mouseenter', roll.underlined());
// roll.underlined is invoked when button emits the 'mousenter' event
$("button").on('mouseenter', roll.underlined);

You are passing an un-needed context to your jQuery selector in each callback

// nonworking: no need for "this"
function rollEnter(){
  $("button", this).css("color", "red");
} 
// working 
function rollEnter(){
  $(this).css("color", "red"); // $(this) is element event was triggered on
}

jsbin

edited Jul 23, 2013 at 16:43

answered Jul 23, 2013 at 16:29

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

Maybe it should better become $(this) instead of $("button")?

Nick Tomlin Over a year ago

@Bergi you are absolutely right, didn't even think to change that. I've made the correction, thanks!

aug · Accepted Answer · 2013-07-23 16:35:35Z

Found the fix. Get rid of the , this up in the jQuery selector (I'm pretty sure it does not know what to do with this so it just doesn't do anything at all.) A helpful tip to keep in mind is that jQuery uses CSS selector syntax when trying to select jQuery elements so write it as if you were trying to apply CSS to it (in this case to a button)

Also remove the parentheses at the bottom because putting parentheses next to a method tells the code to call it immediately.

$(document).ready(function(){

var roll = (function(){     
      function rollEnter(){
      //removed ", this"
      $("button").css("text-decoration", "underline");
      }     
      function rollExit(){
      $("button").css("text-decoration", "none");
      }     
    return{
    underlined: rollEnter,
    standard: rollExit
    };
})();


    $("button").on('mouseenter', roll.underlined); //<-- () removed
    $("button").on('mouseleave', roll.standard);   //
});

http://jsfiddle.net/V78Dm/

Collectives™ on Stack Overflow

Javascript/jQuery Coding Pattern Advice

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related