Jquery bind user defind function with different elements

Question

$("#mySecondDiv").bind('my-event', function(event, a ,b) { /* ... */ });
$("#mySecondDiv").trigger('my-event', [1, 2]);

Here is a function defined inside bind() method . I want this function to be once defined globally and use for multiple elements.

For example :

function{ //definition }

$("#mySecondDiv").bind('my-event', --call above function here--);
$("#mySecondDiv").trigger('my-event', [1, 2]);

$("#myAnotherDiv").bind('my-event', --again call the same above function here--);
$("#myAnotherDiv").trigger('my-event', [1, 2]);

How can I achieve this ?

`function foo() {...} $(...).bind('click', foo);` Learn more about functions: http://eloquentjavascript.net/chapter3.html — Felix Kling, Jul 26 '13 at 06:58
*similar*: [Bind function to multiple events of different elements at once](http://stackoverflow.com/questions/4805818/bind-function-to-multiple-events-of-different-elements-at-once) ... note that in your case you can simply both elements at once though `$('#id1, #id2').bind(...)`. — Felix Kling, Jul 26 '13 at 07:11
If You are using the jQuery lib version 1.7 or above then try `.on()` instead of `.bind()` as it is outdated method. **jQuery Ref:** *As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.* — dreamweiver, Jul 26 '13 at 07:34

score 2 · Answer 1 · answered Jul 26 '13 at 06:59

2

Thats quiet easy

JS CODE:

function callMultiple () { //definition }

$("#mySecondDiv").bind('my-event', callMultiple);
$("#mySecondDiv").trigger('my-event', [1, 2]);

$("#myAnotherDiv").bind('my-event', callMultiple);
$("#myAnotherDiv").trigger('my-event', [1, 2]);

Happy Coding :)

answered Jul 26 '13 at 06:59

dreamweiver

6,002
2
24
39

You can also access the unlisted function parameters inside the function definition by using the 'arguments' array. – Marginean Vlad Jul 26 '13 at 07:04
It's not working, and I also have to pass some object in this function. Kindly tell me with parameterised function. – Ali Shahzad Jul 26 '13 at 07:07
@Ali: Kindly explain what exactly "is not working" and provide a better example for your requirements. If you don't provide the necessary information, it is very difficult for us to help you. Seems to work fine for me: http://jsfiddle.net/TcJWs/. – Felix Kling Jul 26 '13 at 07:11

score 0 · Answer 2 · answered Jul 26 '13 at 06:59

0

Define your function somewhere -

function yourFunction(event, a ,b) { /* ... */ }

Now you can use it this way -

$("#mySecondDiv").bind('my-event', yourFunction);
$("#myAnotherDiv").bind('my-event', yourFunction);

answered Jul 26 '13 at 06:59

Adil Shaikh

44,509
17
89
111

$("#mySecondDiv").bind('populate', yourFunction); $("#myAnotherDiv").trigger('populate'); function{ //code here } I just have written this, but it's not working. – Ali Shahzad Jul 26 '13 at 07:16
@AliShahzad , You need to trigger event – Adil Shaikh Jul 26 '13 at 07:30
@AliShahzad: I guess its not related to external functional reference, its something else which would be causing problem :) just a create a jsfiddle, so that it will be easy to rectify your problem. fiddle link:http://jsfiddle.net – dreamweiver Jul 26 '13 at 07:31
@Ali: If you exactly wrote what you put in your comment, then you have a syntax error. `function{ //code here }` is not valid JavaScript. – Felix Kling Jul 26 '13 at 10:26

Jquery bind user defind function with different elements

2 Answers2