jQuery-删除克隆的元素 [英] jQuery - Removing a cloned element

问题描述

我正在尝试制作一个具有添加和删除新元素选项的Web表单.我可以将其作为源或克隆元素之外的按钮来使用，但是在使删除"按钮在克隆元素内工作时遇到了问题.

I am trying to make a web form which has the option to add and remove a new element. I can get this working as buttons outside of the source or cloned elements, but I am having a problem getting a 'Remove' button to work within a cloned element.

HTML代码是:

<table>
    <tr><td class="associate_column_left">
        Bursary award rates:</td><td class="associate_column_right">
        <div class="clone">£ <input type="text" name="AMOUNT" value="100" class="cl"><a href="#" class="remove_trigger">Delete amount</a></div>
        <div class="placer"></div>
        <p><a href="#" class="clone_trigger">Add another bursary award amount</a> &nbsp; <a href="#" class="remove_trigger">Remove last bursary award amount</a></p>
    </td></tr>
</table>

当前的jQuery是:

And the current jQuery is:

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").click(function () {
        $('.clone').first().clone().insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });
});
// End code for duplicating a div box

// Start code for removing an already duplicated div box
$(document).ready(function(){
    $(".remove_trigger").click(function () {
        if ($(".clone").length != 1) {
            $(".clone:last").remove();
        }
        //$('.clone:last').not('.clone:first').remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box

这是 http://jsfiddle.net/dalepotter/fr8p8/1/

表格底部的添加其他助学金奖励金额"和删除上一个助学金奖励金额"链接正常，但删除金额"无效-表示要删除其中包含的行.

The 'Add another bursary award amount' and 'Remove last bursary award amount' links at the bottom of the table work fine, but not the 'Delete amount' - which is meant to remove the row that it is contained within.

虽然有些地方似乎是错误的...如果有人有任何建议，请让我知道-这让我有点发疯了！

Something seems to be wrong though... If anyone has any advice please do let me know - it's driving me a bit crazy!

非常感谢您能给予的任何时间...

Many thanks for any time that you can give...

推荐答案

问题是，当您附加点击事件处理程序时，.remove_trigger-elements不存在，请尝试更改此行

The problem is that the .remove_trigger-elements are not present when you attach the click eventhandler, try changing this line

$(".remove_trigger").click(function () {

对此

$("table").on("click", ".remove_trigger", function () {

这篇关于jQuery-删除克隆的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！