Question

当我点击提交按钮时，一些新的html元素必须添加并显示我在文本框中输入的文本。我的代码如下：

$('#myButton2').on('click', function (event) {
      $('input:text').each(function(index){
      if (index==0) {
        $('body').append("<div id='inner' class='one'>");
        $('.one').append("<Section id='inner1'>");
        $("<input type='radio' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "check-1")
     .attr("style", "display:none;")
     .appendTo(".one");
        $('.one').append("<label for='check-1' style='font-size:10pt;color:#000000;'>"+$(this).attr('value'));

       }
});
});

首次点击，输出显示一次。但是第二次点击，我得到输出两次，依此类推。我的输出如下：

  //for first click
    one
  //for second click
    one
    two
    two
    .
    .
    .

但我想这样：

//for first click
    one
  //for second click
    one
    two

    .
    .
    .

有谁帮助过我？

Answer 1

我冒昧地改变代码而不使用each方法（我希望没关系），并将标签和单选按钮添加到一个部分。此外，我使用整数将id属性设置为唯一。

$(function () {
    $('#myButton2').on('click', function (event) {
        var input = $('input:text').val();
        var count = $('#inner label').length;
        //if div inner doesn't exist
        if ($('#inner').length == 0) {
            $('body').append("<div id='inner' class='one'>");
            $('.one').append("<Section id='inner1'>");
            //add to section inner1
            $("<input type='radio' value='' />")
                .attr("id", "myfield-1")
                .attr("name", "check-1")
                .attr("style", "display:none;")
                .appendTo("#inner1");
            //add to section inner1
            $('#inner1').append("<label for='myfield-1' style='font-size:10pt;color:#000000;'>" + input);

        } else {
            count = count + 1;
            $('.one').append("<Section id='inner" + count + "'>");
            var innerId = "#inner" + count;
            $("<input type='radio' value='' />")
                .attr("id", "myfield-" + count)
                .attr("name", "check-1") // same name for radio button group
            .attr("style", "display:none;")
                .appendTo(innerId);
            $(innerId).append("<label for='myfield-" + count + "' style='font-size:10pt;color:#000000;'>" + input);

        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="myButton2">Add</button>
<input type="text" />

为查询中的按钮单击创建新的html元素

1 个答案: