Attaching Parameterised Event in JavaScript

Question

I want to attach an event to an element in JavaScript, problem is that I know only simple event attachment without parameters but here I want to attach an event with this parameter, something like shown below

element.addEventListener("onclick", 
                         function RemoveDirectory(this) {
                            alert(this);
                    });

here this should refer to element of course.

Edit

I tried using Jquery but since the element is not selected from the DOM it is a dynamically created element can some one tell me how can I use Jquery's $("selector").click() method with dynamically created elements which were created via document.createElement("input");

I tried this with jquery 1.7.2 NO LUCK

<script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 
      type="text/javascript" language="javascript">
</script>

<div id="diver">
        Hello events !
</div>

<script type="text/javascript" language="javascript">
        var btn = document.createElement('INPUT');
        btn.type = 'button';
        btn.value = "CLICK me";

        document.getElementById("diver").appendChild(btn);
        $(document).on('click', btn, function () {
            alert(this.value);
        });
</script>

problems with this are

Event is added to whole document instead of that dynamically added button only.
this keyword refers to document instead of that dynamically added button only.

Consider using jQuery, which does this for you for all event listeners, automatically. — Matt Ball
– Matt Ball, Commented Aug 8, 2012 at 12:51
jQuery works just fine with dynamically created elements. Show more code and we can help you better. — Matt Ball
– Matt Ball, Commented Aug 8, 2012 at 13:08
@MattBall see my edit, I have shared my code, can you help me out ? — yogi
– yogi, Commented Aug 8, 2012 at 13:27

xkeshav · Accepted Answer · 2012-08-08 13:07:22Z

1

add event with dynamically created element. try with jQuery .on

$(document).on('click','selector', function() {
  // here add your function
});

here selector will be your dynamically created element.

Note : jQuery 1.7 is required

answered Aug 8, 2012 at 13:07

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

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

3 Comments

yogi Over a year ago

@Adnan , diEcho could you plz see my edit, problem is still alive.

xkeshav Over a year ago

set any ID ( if only 1 button ) or Class to the dynamically created element.

yogi Over a year ago

Yes it worked after applying a class to that button, Thanx all.

Adi · Accepted Answer · 2012-08-08 13:06:49Z

1

You can either use jQuery's on() method

$('#parent').on('click', 'input', function(){});

if you don't know the parent then you can use document instead.

or you can bind the handler after creating the element

$(document.createElement('input')).click(function(){});

answered Aug 8, 2012 at 13:06

Adi

5,1796 gold badges35 silver badges48 bronze badges

4 Comments

Esailija Over a year ago

You could find it useful that there is a shortcut for this in jQuery: $("<input>") which does exactly the same as $(document.createElement('input'))

Adi Over a year ago

@Esailija. Although I'm aware of that, thank you for mentioning it. I usually prefer document.createElement() because of the notable performance difference, any thoughts?

Esailija Over a year ago

Well, let's say you want to create 100k elements. You can do this in 1 second, but with jQuery shortcut it takes 1.25 seconds. Now, actually doing anything with these elements is going to take MINUTES (actually it would probably crash the browser even), so what was the point of saving 0.25 seconds? :P

Adi Over a year ago

@Esailija, true. I guess the word "performance" triggers the crazy region in my brain :D

m-r-r · Accepted Answer · 2012-08-08 12:55:03Z

-1

Have you tried to use closures ?

var someRandomVariable = this;
element.addEventListener("onclick", function() {
    console.debug(someRandomVariable); //=> this
});

answered Aug 8, 2012 at 12:55

m-r-r

5556 silver badges15 bronze badges

1 Comment

m-r-r Over a year ago

The variable this is a reference to the object to which the function belongs, it's relative. In the code above, i use the variable someRandomVariable to send the value of this to the function. That's called a closure.

Collectives™ on Stack Overflow

Attaching Parameterised Event in JavaScript

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related