Question

我想在单击“添加标签”按钮时附加标签的文本，如下所示，

value1，value2，value3等......

但是我无法实现我想要的，这里出了什么问题？这是jsfiddle。

<div style="display:inline">
    <button id="addButton" > Add Label </button>

</div>
<div id="holder">




  $(document).ready(function() {
    var i = 0 ;
    var labelID = '';
    $("#addButton").click(function(){
     i = i+1; 
        labelID= 'label'+i+ ',';
        $('<div />', {

        })
            .addClass("label")
            .appendTo("#holder");
        $('<label />', {
            for: 'holder'       
        })
           .attr('id', labelID)
           .text("Value" + i)
           .appendTo("#holder")
        .click(function (e) {
                var name = $('#'+labelID).text();
            alert("event fired: text is: "+ e.currentTarget.textContent + " \n label id is:   " + e.currentTarget.id);
        });    
        $('<div> , </div>')
            .appendTo("#holder");

    });

    });

Answer 1

不要使用块级元素。

http://jsfiddle.net/KendoDev/7ot577qp/9/

$(document).ready(function() {
var i = 0 ;
var labelID = '';
$("#addButton").click(function(){
 i = i+1; 
    labelID= 'label'+i+ ',';
    $('<span>')
        .addClass("label")
        .appendTo("#holder");
    $('<label>', {
        for: 'holder'       
    })
       .attr('id', labelID)
       .text("Value" + i)
       .appendTo("#holder")
    .click(function (e) {
            var name = $('#'+labelID).text();
        alert("event fired: text is: "+ e.currentTarget.textContent + " \n label id is:   " + e.currentTarget.id);
    });    
    $('<span> , </span>')
        .appendTo("#holder");

});

});

Answer 2

div就像一个块，所以它需要一个完整的空间，你的下一个元素在div之后开始，默认情况下div 显示属性为阻止，将其更改为内联，以便它不占用所有空间并允许其前面的元素以单行显示所有内容：

$('<div> , </div>').css("display","inline")

UPDATED FIDDLE

Answer 3

希望这是你想要实现的目标

$(document).ready(function() {
    var i = 0 ;
    var labelID = '';
    $("#addButton").click(function(){
        i = i+1; 
        $('<div><label for="holder" id="label'+i+'">Value'+i+'</label>,</div>').appendTo("#holder");
    });
});

Answer 4

$(document).ready(function() {

    var i = 1;

    $("#addButton").click(function(){
        $('#holder').append("<label for='holder' id=label"+i+">Value"+i+", </label>");
        i++;
    });

});

http://jsfiddle.net/7ot577qp/4/

如何使用jQuery appendTo将标签文本附加到同一行？

4 个答案: