添加按钮不起作用

Question

我正在尝试生成树结构。 “+”按钮添加新级别，“-”按钮删除当前级别。

<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('click',..) 中的代码有效，因为我在 $(".add").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 class

$(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();
    });
});

添加按钮不起作用

Add button not working

jquery

onclick

jsFiddle