Question

我正在尝试开发一个简单的todo应用程序，但是使用jQuery创建的元素无法使用我设置的快捷键删除。我创建的短按键在第一个元素（以及从头开始的其他元素）上工作，但是通过jQuery进入DOM的元素无法删除。

<script>
    $(document).ready(function() {
        $('textarea.todo').focus(function () {
            $(this).elastic();
        });

        $('textarea.todo').focusout(function () {
            $(this).animate({ height: "2em" }, 500);
            $(this).scrollTop(0);
        });

        $('#addTodo').click(function(){
            $('<textarea class="todo" rows="1"></textarea>').appendTo('#todos');
        });

        $('.todo').bind('keydown', 'alt+ctrl+d', function(){
            $(this).fadeOut('Slow');
        });
    });
</script>
</head>

<body>
    <div id="header">
        Simple<span id="alt">TODO</span>
    </div>
    <div id="todos">
        <textarea class="todo" rows="1"></textarea>
    </div>
    <div id="footer">
        <div class="left"><img src="PlusSign.png" id="addTodo"/></div>
        <div class="right">HELP</div>
    </div>

Answer 1

$('.todo').bind('keydown', 'alt+ctrl+d', function(){
                                    $(this).fadeOut('Slow');
                    });

此处使用on()代替bind。在这种情况下，将自动订阅新创建的元素。

$(document).on('keydown', '.todo', function(e){    
        if (e.ctrlKey && e.altKey && e.keyCode == 68)
            $(this).fadeOut('Slow');
});

代码：http://jsfiddle.net/FgZaR/3/

Answer 2

答案基本上是在添加处理程序之后添加元素（元素不存在），在这种情况下，根据您的jQuery版本，您可以使用一些选项。

最新版本使用'on'http://api.jquery.com/on/
以前的版本同时使用'委托'和'实时'http://api.jquery.com/delegate/或http://api.jquery.com/live/

即使在您进行初始绑定后添加事件，也会注册事件。

Answer 3

只是当您使用AddTodo方法添加元素时，不会在其上附加快捷方式事件。

$('#addTodo').click(function(){
    $('<textarea class="todo" rows="1"></textarea>').appendTo('#todos').bind('keydown', 'alt+ctrl+d', function(){
        $(this).fadeOut('Slow');
    });
});

Answer 4

我是这样做的并且有效：

            $('#addTodo').click(function(){
            $('<textarea class="todo" rows="1"></textarea>').appendTo('#todos');
            $('.todo').bind('keydown', 'alt+ctrl+d', function(){
                $(this).fadeOut('Slow');
            });
        });

可能不是最好的解决方案，但至少可以使用。

使用jQuery删除附加元素

4 个答案: