jquery dynamic click function

Question

Can some one help me? The Idea is to create dynamic buttons with a loop and then use the jquery click function to use one of them

//I'm creating dynamic buttons like this:

for(i=0; i<1000; i++){
    $contentBox.append('<button id="add'+ i +'" type="button" class="btn btn-success">Accept</button>');

    //but how would I create the jquery click function?

    $('#add'+i).click(function(e) {....});

    //this does not create 1000 click functions. It only changes the id to the last one so what ever button you click on you will always get the las id
}

You will want to use $(document).on('click', '#add'+i', function(e){ ... }) for dynamic elements. You can refer to the SO docs about delegated events. I had an example going over adding events handlers to dynamic elements specifically, although it was never accepted/removed. Anyways just change $('ul') to $(document) in the docs example for it to work in any case. — Spencer Wieczorek
– Spencer Wieczorek, Commented Dec 17, 2016 at 4:03
use delegates. $(document).on(click: function(){}, '#add' + i) — Nadeem
– Nadeem, Commented Dec 17, 2016 at 4:12

kakoma · Accepted Answer · 2016-12-17 04:14:26Z

1

@Spencer's comment is on point - you can use a delegated event. Or, you can simply use the button class:

for(i=0; i<1000; i++){
    $contentBox.append('<button id="add'+ i +'" type="button" class="btn btn-success">Accept</button>');

 //Rest of your code
}

//Then attach the event to the class:
$('button.btn-success').click( function(){
//I suspect you'll want the ID so here goes
var buttonID = $(this).attr('id');
//The rest of the fun stuff
});

answered Dec 17, 2016 at 4:14

kakoma

1,20314 silver badges18 bronze badges

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

Comments

nvioli · Accepted Answer · 2016-12-17 04:12:12Z

0

If you put i in the .... of your click handler, it won't fix its value to what it was when the click handler was created; rather it will always refer to the variable i which takes the value 1000 when you're done looping. Perhaps you could store i in an attribute of the button like below (or read it out of the element's id).

$contentBox = $('#content');
$result = $('#result');

for(i=0; i<10; i++){
    $contentBox.append('<button id="add'+ i +'" data-eyeVal="' + i + '" type="button" class="btn btn-success">Accept</button>');

    //but how would I create the jquery click function?

    $('#add'+i).click(function(e) {$result.append('<br/>clicked ' + $(this).attr('data-eyeVal'))});

    //this does not create 1000 click functions. It only changes the id to the last one so what ever button you click on you will always get the las id
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<div id="result"></div>

answered Dec 17, 2016 at 4:12

nvioli

4,2293 gold badges25 silver badges40 bronze badges

1 Comment

deleted account Over a year ago

you the man. Just what I wanted "$(this).attr('data-eyeVal')"

PRABA · Accepted Answer · 2016-12-17 04:11:16Z

0

You should use live function for dynamic button click events. try this

$('#add'+i).live("click", function(){
  // codings
});

answered Dec 17, 2016 at 4:11

PRABA

4601 gold badge6 silver badges19 bronze badges

1 Comment

Spencer Wieczorek Over a year ago

live() has been deprecated and removed since 1.9.

Collectives™ on Stack Overflow

jquery dynamic click function

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related