Create Unique Buttons Dynamically

I'm new to jQuery and am trying to create jQuery UI buttons dynamically and them to a list. I can create one list item but no more are appended after it. What am I doing wrong? $('

Solution 1:

I suggest to exchange the position of what you are appending and where you are appending to. This way, you retain the appended object, and should be able to work with it as a standard jQuery selector. From your code i commented out the .button() and the .append() lines, because i'm not sure what you want to do with them. Should you need help adding those lines, just drop a comment to my answer ;)

Oh, i almost forgot: i use var i to simulate different contents for username and userType data.

A JSFiddle for you is here: http://jsfiddle.net/cRjh9/1/

Example code (html part):

<div>
    <p id="addButton">add button</p>
    <ul id="buttonList">
    </ul>
</div>

Example code (js part):

var i = 0;

$('#addButton').on('click', function()
{

  $('<li><button class="itemButton">'+ 'username' + i + '</button></li>').appendTo('#buttonList')
  //.button()
  .find('.itemButton')
  .data('type', 'userType'+i)
  .click(function(e) { alert($(this).data('type')); 
                     })
  //.append('<button>Edit</button></li>')
  ;
  i++;

});

Solution 2:

You need complete tags when you wrap any html in a method argument. You can't treat the DOM like a text editor and append a start tag, append some more tags and then append the end tag.

Anything insterted into the DOM has to be complete and valid html.

You are also not understanding the context of what is returned from append(). It is not the element(s) within the arguments it is the element collection you are appending to. You are calling button() on the whole <UL>.

I suggest you get a better understanding of jQuery before trying to chain so many methods together

Solution 3:

Just a very simplistic approach that you can modify - FIDDLE.

I haven't added the data attributes, nor the click function (I'm not really sure I like the inline "click" functions - I generally do them in jQuery and try to figure out how to make the code efficient. Probably not very rational, but I'm often so).

JS

var names = ['Washington', 'Adams', 'Jefferson', 'Lincoln', 'Roosevelt'];

for( r=0; r < names.length; r++ )
   {
    $('#buttonList').append('<li><button>'+ names[r] + '</button></li>');
    }

$('#buttonList').append('<li><button>Edit</button></li>');