jQuery - programmatically create dynamic links

Question

I'm pretty new to jQuery and javaScript programming and wondered if anyone could help me?

I have slider bar which is populated using an unordered list. Works very nicely, rendering text dynamically on top of button images. Each of this list items contains a link that calls a Function. For example:

<li><div class="btnGraphic"><img src="images/button.png" /><a href="#" id="my_link"><div class="btnText">'MyTitle'</div></a></div></li>';

However I now wish to populate the entire page dynamically using and XML file. There will be no static content on the pages therefore the slider contents must be able to change and take a variable number of buttons and therefore links. I've retrieved the data from the XML file and stored it in a number of arrays. The code for adding a list item now reads as follows:

for (i = 1; i < count; i++) {
    var newListItem = '<li><div class="btnGraphic"><img src="images/button.png" /><a href="#" id="'+myLink[i]+'_link"><div class="btnText">'+myTitle[i]+'</div></a></div></li>';
    $("#sliderList").append(newListItem);
};

So far so good. I think. However where I'm unable to progress further is programmatically creating the link. The link opens a jQueryUI dialog box. The code for the link on the static page reads as follows:

$('#my_link').click(function(){
     clearScreen(); //clears any open dialog boxes
     $('.myContent').dialog('open');
     return false;
});

My question to you is how do I create this code programmatically? The following is, I know absolutely not right and a long way off but it gives an idea of what i want to do:

for (i = 1; i < count; i++) {
    $("'"+myLink[i]+"_link'").click(function() {
        clearScreen(); //clears any open dialog boxes
        $("'."+myContent[i]+"'").dialog.('open');
        return false;
    });
};

I realise also that I may be approaching this from the wrong angle, so any pointers, help, etc very much gratefully received!

BTW: Wrapping an `` around a `
` is invalid HTML.
– Tomalak Apr 15 '11 at 18:04 — Tomalak, Apr 15 '11 at 18:04

score 4 · Accepted Answer · answered Apr 15 '11 at 18:01

You can attach the click handler (i.e. what you call 'link') before appending the newly created items to the DOM tree. Try modifying the block to the following:

for (i = 1; i < count; i++) {
    var myNewContent = "."+myContent[i]; // bind myContent[i] to the closure
    var newLink = $('<a href="#" id="'+myLink[i]+'_link"><div class="btnText">'+myTitle[i]+'</div></a>');
    newLink.click(function() {
        clearScreen(); //clears any open dialog boxes
        $(myNewContent).dialog('open');
        return false;
    });
    var newListItem = $('<li />').append(
        $('<div class="btnGraphic" />').append(
           '<img src="images/button.png" />',
           newLink
        )
    );
    $("#sliderList").append(newListItem);
};

Thanks very much for the quick response! I've tried the code, but it seems to create the same click handler (the last item in the list) for each button. Any ideas? — Rik, Apr 17 '11 at 14:19
Ah ok I've got it! It needs closure. as per [http://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function] here. — Rik, Apr 18 '11 at 07:19

score 2 · Answer 2 · answered Apr 15 '11 at 18:00

Two doc pages which will be of interest are jQuery's Delegate method and jQuery's template plugin.

A better solution is probably going to look something like this:

$('#sliderList').delegate('li a','click',function(event){
  event.preventDefault();
  // do stuff
});

This is recommended over using live because you are stopping the event at the list level rather than letting the event bubble all the way up the DOM tree. But using either delegate or live will both yield good results.

This means that you can keep changing the contents of your list and the links will continue to work as desired.

I included the link to the template plugin because that happens to be a fantastic way to transform structured data into HTML without resorting to building it all in the javascript.

thanks! for the moment the solution above is working, so short term I'll go with that. Appreciate the help will check out the template plugin! — Rik, Apr 18 '11 at 12:13

jQuery - programmatically create dynamic links

2 Answers2