Attach function with parameters to dynamically created div with jQuery

Question

I am creating some divs dynamically and Im attaching onclick functions to them. Is there any way to attach functions which take parameters in this way?

If I just create the div in html I can attach a function and it works perfectly. I can also attach simple functions without parameters dynamically and they work perfectly.

How could I attach this function which takes 'this' as a parameter to my div??

Would anyone have any suggestions???

onclick="playSound(this)"

function playSound(el){
var soundId = $(el).html();
if ( soundId == ('d')){
d.playclip()
}
else if ( soundId == ('a')){
a.playclip()
}
else if ( soundId == ('n')){
n.playclip()
}

I can attach a function like this and it works fine.

$(".myDiv").live("click", function(){
alert('hello');
});

Any help would be hugely appreciated!!! Thanks!!

The last example is missing () after function

Alexander
– Alexander

2013-01-06 20:39:00 +00:00
Commented Jan 6, 2013 at 20:39 — Alexander
– Alexander, Commented Jan 6, 2013 at 20:39
soundId == ('d') is same as soundId == 'd'

elclanrs
– elclanrs

2013-01-06 20:41:45 +00:00
Commented Jan 6, 2013 at 20:41 — elclanrs
– elclanrs, Commented Jan 6, 2013 at 20:41

Alexander · Accepted Answer · 2013-01-06 20:40:26Z

3

For this specific case you could use something like:

$(".myDiv").click(function(){
  playSound(this);
});

If you refactor your code dropping el and using this in this way:

function playSound() {
    var soundId = $(this).html();
    if (soundId == ('d')) {
        d.playclip()
    } else if (soundId == ('a')) {
        a.playclip()
    } else if (soundId == ('n')) {
        n.playclip()
    }
}

You could use it directly.

$(".myDiv").click(playSound);

answered Jan 6, 2013 at 20:40

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

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

Comments

lucassp · Accepted Answer · 2013-01-06 20:38:49Z

1

You can attach some data to your elements using $(el).data('some-key', 'some-value') and

$(".myDiv").live("click", function() {
   alert($(this).data('some-key'));
})

In this way you can attach data to an element and make use of it later.

answered Jan 6, 2013 at 20:38

lucassp

4,1663 gold badges29 silver badges37 bronze badges

Comments

Chris Montgomery · Accepted Answer · 2013-01-06 20:50:29Z

1

absolutely. It's called javascript's bind function:

playSound.bind(this, arg1, arg2, ...)

Another useful function that is similar is jquery's proxy function. This only keeps track of the scope though and doesn't allow you to send other parameters:

$.proxy(playSound, this)

edited Jan 6, 2013 at 20:50

answered Jan 6, 2013 at 20:42

Chris Montgomery

2,3642 gold badges20 silver badges30 bronze badges

1 Comment

Pointy Over a year ago

The stuff about .bind() is correct, but it's not a jQuery feature. It's native JavaScript. There's a somewhat similar jQuery feature called $.proxy() however.

Collectives™ on Stack Overflow

Attach function with parameters to dynamically created div with jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related