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?

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

<div>
    <ul id="buttonList">    
    </ul>
</div>

This only creates one list item with two buttons (although the second button seems to be encased in the first one, but I can probably figure that issue out). How do I get it to create multiple list items with their own unique 'data' values (i.e. I can't do a find() on a particular button class and give it data values as all buttons would then have the same data)?

回答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++;

});

回答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

回答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>');

来源：https://stackoverflow.com/questions/24598347/create-unique-buttons-dynamically