ByPass jQuery Plug-in OnClick Funtion

Question

Hi,

I am using the following jQuery plug-in, i.e:

http://flowplayer.org/tools/scrollable.html

The issue I am having though is that, as part of the call to the api, it seems to make us of the onClick() function within the plug-in js file.

I actually want to use the onClick function as your normal javascript onClick() function but I am not able to as it seems to be overridden with the following code:

       // assign onClick events to existing entries
   } else {

    // find a entries first -> syntaxically correct
    var els = nav.children(); 

    els.each(function(i)  {
     var item = $(this);
     item.attr("href", i);
     if (i === 0) { item.addClass(conf.activeClass); }

     item.click(function() {
      nav.find("." + conf.activeClass).removeClass(conf.activeClass);
      item.addClass(conf.activeClass);
      self.setPage(item.attr("href"));
     });

    });
   }

  });


  // item.click()
  if (conf.clickable) {
   self.getItems().each(function(index, arg) {
    var el = $(this);
    if (!el.data("set")) {
     el.bind("click.scrollable", function() {
      self.click(index);  
     });
     el.data("set", true);
    }
   });    
  }

Is there anyway of bypassing this, so that I can use the standalone onClick() function?

Thanks. Tony.

Answer 1

You can define your own click event handler and stop propagation of the event there.

$('your selector').click(function (e) {
    e.stopPropagation();
});

Answer 2

Seems that they haven't given a callback function to call back to. You can modify their JS code to do this -

item.click(function() {
    nav.find("." + conf.activeClass).removeClass(conf.activeClass);
    item.addClass(conf.activeClass);
    self.setPage(item.attr("href"));
    if(typeof(clickCallback) != "undefined") clickCallback();
});

So, if you have a function called clickCallback defined on your page, you'll now be able to handle the click event after their click event code has been executed -

function clickCallback() {
    //This is the function on your page. This will be called when you click the item.
}

You don't have to call the clickCallback function, the library will itself call that function if its been defined.