Audible 'click' in IE when using the jQuery .click() event and <a href='#'/>

Question

I often use links with href='#' when calling ajax resources.

I noticed that IE makes an audible "click" when clicking these links.

Here's a workaround:

$("#element")

.click(function(){return false;})

.bind("click", function(){ alert(this); });

HOWEVER, when I try to encapsulate this functionality in a jQuery plugin, I'm not successfully returning the "clicked" element.

For instance, if I use the approach above I'll get the actual A element that was clicked.

But if I write a plugin like this:

(function($){
    $.fn.clickless = function(fnCallback) {

     return this
      .click(function(){return false;})
      .bind("click", function(){
       fnCallback.call();
      });

    }
})(jQuery);

And then call

$("#element").clickless(function(){
alert(this);
});

I'll get the Window object, which doesn't help when I'm trying to find the actual A tag.

Maybe I'm just writing the plugin incorrectly -- any ideas?

Thanks so much,

Michael

Answer 1

try this:

(function($){
    $.fn.clickless = function(fnCallback) {

      $.each(this, function() {

        var element = $(this);

        element.click(function(){return false;})
               .bind("click", function(){
                    fnCallback();
               });
     });

     return this;

   }
})(jQuery);

Answer 2

Alternatively you'll need to advise your users on how to go into the control panel, sounds, and turn off the sounds for start/end navigation.

I personally hate these click noises so it is the first thing I turn off on a Windows install.

Answer 3

why not just use:

.bind("click", fnCallback);

as that will have this properly set.

Edit: this version actually works:

.bind("click", function(){
    fnCallback.apply(this);
});

poked around inside jQuery's each() to find out what it used

More edit:
on looking at how apply() and call() differ, this may be the more correct way to do it.

.bind("click", function(){
    fnCallback.call(this);
});

Answer 4

Finally got it working --

//jQuery.clickless.js

(function($){    
    $.fn.clickless = function(fnCallback) {        
        return this
                .click(function(){return false;})                
                .bind("click", function(){                        
                    fnCallback.apply(this);                
                });    
           }}
)(jQuery);

Edit:

Thanks go to cobbal and Julian (of the Dharma Initiative) -- much appreciated.