克隆标签,在jquery中一起输入框

时间:2016-01-28 13:00:21

标签: jquery html asp.net

我在标签“#valgmulighed1”中有以下HTML,我想在用户按下按钮时在jquery中克隆。我希望我的jquery附加一个类,以便用户可以删除添加的各个行。我想某种循环是必要的,以便为每个克隆内容提供一个“唯一”类,这样脚本就不会删除所有行。

我的HTML在这里:

<input type="button" id="btnid" value="+" />
<div id="valgmulighed1">
    <label>
        <input type="checkbox" name="check2" id="sv1" />
        <span class="label-text">Rigtigt</span>
    </label>
    <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
    <div class="slet">
        <span>Slet</span>
    </div>
</div>

我尝试在没有循环的情况下对此进行jquery脚本,首先看看我是否可以正确地获得克隆功能。

$("btnid").click(function () {
    $('#valgmulighed1').clone().attr('id', 'id_' + $('#valgmulighed1').index()).inserAfter('#valgmulighed1');
})

然而它没有,所以我在这一点上需要一些帮助。

4 个答案:

答案 0 :(得分:0)

你选择器错了。它应该#btnid而不是btnid。而不是生成唯一的id,最好使用类。在这里,我使用valgmulighed类。点击.slet删除最近的.valgmulighed,如下所示。

$("#btnid").click(function () {
    $('.valgmulighed:last').clone().attr('id', 'valgmulighed' + ($('.valgmulighed').length + 1)).insertAfter('.valgmulighed:last');
});

$('body').on('click', '.slet', function () {
    if ($('.slet').length > 1)
        $(this).closest('.valgmulighed').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnid" value="+" />
<div class="valgmulighed" id="valgmulighed1">
    <label>
        <input type="checkbox" name="check2" id="sv1" />
        <span class="label-text">Rigtigt</span>
    </label>
    <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
    <div class="slet">
        <span>Slet</span>
    </div>
</div>

答案 1 :(得分:0)

您的拼写错误inserAfter应为insertAfter且错误的选择器应为$("#btnid")。您应该使用class然后id。在删除行时,您必须使用删除按钮单击事件$(this).parents("valgmulighed:first").remove();

$("#btnid").click(function () {
     $('.valgmulighed:last').clone().insertAfter('.valgmulighed:last');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnid" value="+" />
<div class="valgmulighed">
    <label>
        <input type="checkbox" name="check2" id="sv1" />
        <span class="label-text">Rigtigt</span>
    </label>
    <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
    <div class="slet">
        <span>Slet</span>
    </div>
</div>

答案 2 :(得分:0)

问题出在按钮选择器中 在你的jquery按钮选择器$(“ #btnid ”)上添加#。点击(...

这是一个常见的错误,与我发生了很多关系。

答案 3 :(得分:0)

$("#btnid").click(function() {
    $('#valgmulighed1').clone().attr('id', 'id_' +  $('div[id*="id_"]').length).insertAfter('#valgmulighed1');
})

您使用过$('#valgmulighed1')。index(),但它不正确。每次调用该代码时,您都会得到相同的结果,因为只有一种元素,因此创建的元素将具有相同的ID。