Question

我正在尝试生成树结构。＆＃39; +＆＃39;按钮添加了一个新级别＆＃39; - ＆＃39;删除当前级别。

<html>
<head>
    <title>Editor</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
    <fieldset>
        <legend>Editor</legend>
        <div class="pair">
        <input type="text" class="key" placeholder="key"></input>:<input type="text" class="value" placeholder="value"></input>
        <input type="button" class="add" value="+"/>
        <input type="button" class="delete" value="-"/>
        </div>
    </fieldset>
</div>

<script type="text/javascript">
$("document").ready(function(){
    $("document").on('click','.pair .add',function(event){  
            event.target.parent().children("input.value").hide();
            var insert = '<div class="pair">'+
            '<input type="text" class="key" placeholder="key"></input>:<input type="text" placeholder="value">'+
            ' </input><input type="button" class="button" value="+"/>'+
            '<input type="button" class="delete" value="-"/>'+
            '</div>';
            event.target.parent().after(insert);
    });

    $("document").on('click','.pair .delete',function(){
            event.target.parent().remove();
    });
});
</script>
</body>

两个按钮都不起作用。我知道里面的代码.on（＆＃39;点击＆＃39;，...）是有效的，因为我在$（＆＃34; .add＆＃34;）。click（）块中使用了相同的功能。我错过了什么吗？请帮忙。

感谢。

Answer 1

你不需要像这样创建html。您可以使用clone（）方法创建html元素的精确副本。然后你的代码将是，

$(document).on('click', '.pair .add', function (event) {
    var pair = $(this).closest(".pair");
    pair.after(pair.clone());
});

$(document).on('click', '.pair .delete', function () {
    $(this).parent().remove();
});

Fiddle

Answer 2

更简单的方法是：

jsFiddle

var $pair=$('.pair').eq(0);
var $pair.data('original',$pair[0].outerHTML);

$(document).on('click', '.pair .add', function (event) {
    var pair = $(this).closest(".pair");
    pair.after($($pair.data('original')));
});

$(document).on('click', '.pair .delete', function () {
    $(this).parent().remove();
});

这与Anoop的答案相同，只是它在页面加载时缓存克隆html以防止使用元素克隆输入值

为了您的利益，您的原始代码存在以下问题：

$("document")应该是$(document)没有引号
'</input><input type="button" class="button" value="+"/>'+应该是'</input><input type="button add" class="button" value="+"/>'+您错过了add班级

$(document).ready(function () {
    $(document).on('click', '.pair .add', function (event) {
        $this = $(this);
        $parent = $this.parent();
        $parent.children(".value").hide();
        var insert = '<div class="pair">' +
            '<input type="text" class="key" placeholder="key"></input>:<input type="text" placeholder="value">' +
            ' </input><input type="button" class="button add" value="+"/>' +
            '<input type="button" class="delete" value="-"/>' +
            '</div>';
        $parent.after(insert);
    });

    $(document).on('click', '.pair .delete', function () {
        $(this).parent().remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
        <fieldset>
            <legend>Editor</legend>
            <div class="pair">
                <input type="text" class="key" placeholder="key"></input>:
                <input type="text" class="value" placeholder="value"></input>
                <input type="button" class="add" value="+" />
                <input type="button" class="delete" value="-" />
            </div>
        </fieldset>
    </div>

Answer 3

这是jsFiddle给你的。首先$(document)，而不是$("document")，第二个event.target选择器写错了，新插入的元素有错误的类

<强> HTML

<div id="content">
    <fieldset>
        <legend>Editor</legend>
        <div class="pair">
        <input type="text" class="key" placeholder="key"></input>:<input type="text" class="value" placeholder="value"></input>
        <input type="button" class="add" value="+"/>
        <input type="button" class="delete" value="-"/>
        </div>
    </fieldset>
</div>

<强> JS

$(document).ready(function(){
    $(document).on('click','.pair .add',function(event){  

            $(this).parent().children("input.value").hide();
            var insert = '<div class="pair">'+
            '<input type="text" class="key" placeholder="key"></input>:<input type="text" placeholder="value" class="value">'+
            ' </input><input type="button" class="add" value="+"/>'+
            '<input type="button" class="delete" value="-"/>'+
            '</div>';
            $(this).parent().after(insert);
    });

    $(document).on('click','.pair .delete',function(){
            $(this).parent().remove();
    });
});

添加按钮不起作用

3 个答案:

jsFiddle