如何在附加按钮中获取数据ID？

Question

JavaScript

$("#btn").on('click', function(){
    $("#result").append("<button type='button' id='btnid'
    data-id='show' //this is what I want to get
    class='close pull-right' aria-hidden='true'>some text here</button>");
});

HTML

<button id="btn">CLICK HERE</button>
<div id='result'></div>
<button id="submit">SUBMIT HERE</button>

I want to display the data-id='show' from the appended button after i click the button with an id="submit" . As you can see, the div with id="result" is just like an container of all the appended text.

So far, this is what I have,

JavaScript

$('#submit').click(function(){
    $( "#result" ).each(function( index ) {
        console.log( index + ": " +$(this).text());
    });
});

But with this code, i can only retrieve the text, "some text here". But what i needed is the data-id of my appended button.

I also tried the code below, but it is not working.

JavaScript

$('#submit').click(function(){
    $( "#result" ).each(function( index ) {
        console.log( index + ": " + $( this ).html($(this).html($(this).attr("data-id"))));
    });
});

Answer 1

To get the data-id of the buttons you have in the #result element, you may do this :

$('#submit').click(function(){
    $('#result button').each(function(i){
         console.log(i, ':', $(this).data('id'));
    });
});

Answer 2

try this

$('#submit').click(function(){
  console.log($("#result").find("button").data('id'));
});

make sure you id is unique.... each with ids does not make sense

Answer 3

If the user clicks the #btn "CLICK HERE" button more than once you will end up with multiple new buttons appended within #result (which would be invalid html given that you'd then have duplicate id values), so you'd need to loop through those buttons with .each() rather than trying to loop through #result with .each() :

$('#submit').click(function(){
    $("#result").find("button").each(function(index ) {
      console.log( index + ": " + $(this).attr("data-id"));
    });
});

Demo: http://jsfiddle.net/NXU9e/

NOTE: The markup for your #result element is missing the / in the closing </div> tag.