0

how do I pass context and a pentameter to a external function from a click event

error: TypeError: i.handler.apply is not a function

var myF = function(car){
alert('a click ' + car.model + ' ' + car.year);// alert the car that was passed in 
$(this).css({'border':'1px solid red'}); // make border red of the div that was clicked
};

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

var myCar2 = new Object();
myCar2.make = "VW";
myCar2.model = "golf";
myCar2.year = 2000;


$('.cross-browser').click(this,myCar,myF);
$('.lightweight-footprint').click(this,myCar2,myF);
Hello-World
  • 9,277
  • 23
  • 88
  • 154
  • Maybe start by reading the documentation for $.click()? http://api.jquery.com/click/ – Dave Apr 24 '14 at 18:37

1 Answers1

0

Use this:

$(document).on('click', '.cross-browser', function(){
     myF(this);
});

this allows for event delegation, and applies to any element with the class "cross-browser" even those that are dynamically created.

Example in a codepen:

http://codepen.io/agconti/pen/kauGd

agconti
  • 17,780
  • 15
  • 80
  • 114
  • It should be noted that this is horrendously inefficient, and no one would recommend this unless absolutely necessary. there is usually a container for this information, delegate from that container instead of the entire document. – PlantTheIdea Apr 24 '14 at 18:39
  • @PlantTheIdea this is a best practice for event delegation with jQuery. this would be easy to achieve with vanilla js if you wanted efficiency. Here's one source out of many you can find if you google it http://make.wordpress.org/docs/theme-developer-handbook/advanced-theme-topics/javascript-best-practices/ – agconti Apr 24 '14 at 18:45
  • Delegating by itself is a best practice, but delegating from the document is considered the least efficient (and worst) way to perform delegation because each event needs to process through the entire DOM tree. Delegate from those objects' container, because localization is the fastest way to perform delegation. => http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document – PlantTheIdea Apr 24 '14 at 18:49
  • my answer solves the ops question accurately and succinctly. of course you could delegate from the parent element, but the op has not provided any html for either of us to make any assumptions. if you'd like to answer the question better yourself, please do so. – agconti Apr 24 '14 at 18:54
  • no need to be defensive here man, you were on the right track with delegation, however the implementation you chose happen to be the very thing that jQuery documentation itself says to avoid. i left a comment rather than provide a competing answer so that you could update your answer and receive credit as you captured the intent correctly. don't let your pride overshadow the importance of the teaching aspect of providing answers. we should propagate good practices, not good enough practices. – PlantTheIdea Apr 24 '14 at 19:10