jquery function to create buttons dynamically

Question

I am trying to see if possible if there is a way with jquery to create dynamic buttons. The buttons will be exactly the same but pass specific variables to functions that link to sites or create links to sites. I dont want to have to create each new list item if I have over 300 of them. Is there some way to create a function for each list item to create the buttons dynamically?

Here is the html

<nav id="menu">
    <div id="app">
<ul class="List"><li><span>Enter Number below</span>
            </li>
            <div id="number">
            <input type="text" name="number" id="textbox1" value="22984">
            </div>              
                <li><span>Disney</span>
                <ul id="programs">                  
                      <li><span>Lands</span>
                          <ul id="10min">

                             <li><span>Adventureland</span>
                                <ul id="Adventureland">
                                   <li class="Label">&nbsp;</li>
                            <button class="redirect" id="AdventureLand">Open Website</button><br/>
                            <button class="txtLinky" id="Adventureland">Click Link</button><br/>
                                                <div id="linkified">value</div>     
                                    </ul>
                             </li>
                             <li><span>Frontierland</span>
                                <ul id="Frontierland">
                                   <li class="Label">&nbsp;</li>
                                   <button class="redirect" id="Frontierland">Open Website</button><br/>
                                     <button class="txtLinky" id="Frontierland">Click Link</button><br/>
                                            <div id="linkified">value</div> 
                                    </ul>
                             </li>
                             <li><span>Fantasyland</span>
                                <ul id="Fantasyland">
                                   <li class="Label">&nbsp;</li>
                                    <button class="redirect" id="FantasyLand">Open Website</button><br/>
                                    <button class="txtLinky" id="Fantasyland">Click Link</button><br/>
                                            <div id="linkified">value</div>     
                                    </ul>
                             </li>
                             <li><span>Tomorrowland</span>
                                <ul id="Tomorrowland">
                                   <li class="Label">&nbsp;</li>
                                    <button class="redirect" id="TomorrowLand">Open Website</button><br/>
                                    <button class="txtLinky" id="Tomorrowland">Click Link</button><br/>
                                            <div id="linkified">value</div>     
                                    </ul>
                             </li>
                          </ul>
                      </li>
                   </li>

                </ul>
            </li>               
        </ul>

Here is the javascript

$(".redirect").click(function(){                 
            goUrl = 'http://www.example.com/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val();
            window.location = goUrl;
            });

$(".txtLinky").on("click", function () {    
            var link = 'Copy and paste '+ 'http://teambeachbody.com/shop/-/shopping/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val(); 
                $(this).parent().children('#linkified').html(link);

           $(this).parent().children('#linkified').linkify({
               tagName: 'a',
               target: '_blank',
               newLine: '\n'
            }); 

            $(this).parent().children('#linkified');
            });

here is jsfiddle http://jsfiddle.net/VFhK9/18/

you're reusing ID's that's generally a bad idea. use classes instead — Batavia
– Batavia, Commented Jul 31, 2014 at 17:06
id=TomorrowLand, id=linkified, you are pritty much duplicating any id you are using — Batavia
– Batavia, Commented Jul 31, 2014 at 17:44

A. Wheatman · Accepted Answer · 2014-07-31 19:52:55Z

3

Yes, it's possible!

First of all I would suggest to revise your HTML code cause having other tags except LI inside UL is a bad practice... also you are using not unique IDs for the different elements...

Ignoring all the issues withe HTML formatting, here is example that will go through all UL element with ids that ends with 'land' and add new LI element with two buttons inside:

$('ul[id$="land"]').each(function() {
    var ul = this;
    $(ul).append(
        $(document.createElement('li'))
            .append(
                $(document.createElement('button'))
                    .addClass('redirect')
                    .text('Open Website')
                    .click(function() {
                        var goUrl = 'http://www.example.com/' + $(ul).attr('id') + '?referringRepId=' + $("#textbox1").val();
                        window.location = goUrl;
                    })
            )
            .append(
                $(document.createElement('button'))
                    .addClass('txtLinky')
                    .text('Click Link')
                    .click(function() {
                        // add other functionality here...
                    })
            )
    )
});

I think general idea is clear... just build HTML with minimum required information and use jQuery to add the rest dynamically.

Here is updated Fiddle.

answered Jul 31, 2014 at 19:52

A. Wheatman

6,4366 gold badges48 silver badges63 bronze badges

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

2 Comments

dac086 Over a year ago

while this kind of works, what if all the ul elements with ids are all unique. how can this be accomplished

A. Wheatman Over a year ago

when you build initial HTML mark the ULs that should be processed with some specific class - 'land' etc. and use $('ul.land') instead

Collectives™ on Stack Overflow

jquery function to create buttons dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related