Question

我正在寻找解决问题的方向。

我有HTML div，我想在用户点击id为-1的span时复制它。这是我的 html

<div id = “tab”>
<div class="row">
    <div>
        <select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
            <option value="1">Project Presentation</option>
            <option selected="selected" value="4">Project Root</option>
        </select>                
    </div>
    <div>
        <div>
            <input type="text" required="required" id="ProjectsFolder0Linux" value="xyz"  name="data[ProjectsFolder][0][linux]">
        </div>           
    </div>
    <div id="plus-1" >
                <span>
                    Click here
                </span>
    </div>
</div>
</div>

Jquery的

$(document).on('click', '#plus-1' , function() {
        var html = "<div class=\"row\" >"
                  ???
                 + "</div>";
    $('#tab').append(html);

        });

它附加在jquery中定义的html之上，但我不知道如何在每次点击时有效地附加整个HTML。

Answer 1

演示FIDDLE

<强> Jquery的

 $(document).on('click', '#plus-1' , function() {   
        var html = $(this).parent().clone();
        html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
        $('#tab').append(html);
 });

Answer 2

为你做了一个jsfiddle - http://jsfiddle.net/23GCn/。您的html中也有错误，您需要在<div id="tab">

上使用正确的括号

jQuery(function($){
   var count = 1;
   $(document).on("click", "[id^='plus']", function(){             
       newBlock = $(this).parents(".row").clone();
       count += 1;

       // change id of Plus button
       newBlock.find("[id^='plus']").attr("id", "plus-"+count);

       // Change id and name of select box
       newBlock.find("select")
           .attr("id", "ProjectsFolder"+count+"FolderId")
           .attr("name", "data[ProjectsFolder]["+count+"][folder_id]");

       // Same for input
       newBlock.find("input[type='text']")
           .attr("id", "ProjectsFolder"+count+"Linux")
           .attr("name", "data[ProjectsFolder]["+count+"][linux]");

      // append new element to your tab
      $("#tab").append(newBlock);
   });    
});

请注意，[id^='plus']类型选择器效率非常低，意味着速度慢。考虑使用类而不是id，这样就可以避免更改id所需的所有代码，因为您的页面上不能包含具有相同id的元素。

Jquery动态创建HTML divs点击

2 个答案: