Call function from dynamically created element

Question

I'm wondering which is the best way to call a function for each of these element in the code below:

    for (var y=1; y <= 24; y++) {       
    $("#christmasCalendar").append("<div class='span2'><h1><a href='#' data-toggle='tooltip' class='thumbnail' title='Click to add a question for this day'>"+y+"</a></h1></div>")  
    }

Like if I want to call this function:

    $("#createChristmasDayQuiz").click(function () {
    $("#QuizGuideInfo").delay(1000).fadeIn('slow');
    $("div.infoHolder").html('<i class="fa-icon-bullhorn"></i>Select a color theme for your christmas calendar. This can be changed later.').hide().fadeIn('slow');
    $('#createQuiz').modal('show');
    });

I know they can't have the same ID, but still, which is the best solution?

Thanks in advance!

I mean, I want to call a function from the element that was created inside the "for" — Kim, May 01 '13 at 23:58
Why do you want to have a function called multiple times when the function deals with elements that wouldn't change? It would be running the same code over and over? It's unclear what you are looking for (to me anyway). — Smern, May 02 '13 at 00:00
Possible duplicate http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — AlexP, May 02 '13 at 00:03
@smerny Sorry if I was unclear. It just came to me that each of them actually needs to be unique, in a little way. Is it possible to give each a "data-type" with a unique ID, like data-type='day1', and then call the function "data-type="day" and get a function that is specific for that unique number? — Kim, May 02 '13 at 00:05
@Kim Yes, you can do that, you can also use the text within the a tag as well. data-id="day1" is perfectly acceptable — Kenneth Garza, May 02 '13 at 00:08

score 0 · Answer 1 · answered May 02 '13 at 00:01

0

You can dynamically create actual DOM elements with jQuery, instead of just inserting them with a string. Then you can do anything you want with them, including binding functions to their click handlers.

E.g.

var myNewElement = $('<div/>').addClass('div-class').appendTo('#christmasCalendar').click(function(e) {
    alert('clicked on new element'); 
});

answered May 02 '13 at 00:01

jraede

6,846
5
29
32

this isnt a bad answer, but the problem is that you are not taking advantage of jQuerys ability to "bubble up" events. Because you are binding events to each a tag individually you are creating 24 listeners, all with duplicate functionality. You can instead bind a listener to its closest common parent and only have one listener that listens for everything amonst its children. far more effient use of resources and easy to maintain. See my answer below for its use. – Kenneth Garza May 02 '13 at 00:11

score 0 · Accepted Answer · answered May 02 '13 at 00:03

0

you could bind an "on" event to the #christmasCalendar object

$("#christmasCalendar").on("click", "a", function(e){
    // handle link click event.
});

that will work for all the links

answered May 02 '13 at 00:03

Kenneth Garza

1,886
14
12

Call function from dynamically created element

2 Answers2