添加按钮不起作用

时间:2015-11-26 06:53:29

标签: jquery onclick

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

<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()块中使用了相同的功能。 我错过了什么吗?请帮忙。

感谢。

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

更简单的方法是:

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以防止使用元素克隆输入值

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

  1. $("document")应该是$(document)没有引号
  2. '</input><input type="button" class="button" value="+"/>'+应该是'</input><input type="button add" class="button" value="+"/>'+您错过了add班级
  3. $(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>

答案 2 :(得分:0)

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