点击事件没有在javascript中点击

时间:2012-08-05 09:43:33

标签: javascript jquery

我遇到了jquery点击事件的问题。这是我的应用程序的功能。用户在文本字段中输入名称。当他点击添加按钮时,该名称将出现在内容div标签中。此名称还有一个删除按钮。现在问题是当用户点击删除按钮时它没有给出任何响应。那么我怎样才能做到这一点呢?

这是我的code

HTML:

<div class="container">
    <label>Name</label>
    <input type="text" class="name" name="name" />
    <input type="button" class="addBtn" name="add" value="Add" />
</div>
<div class="contents"></div>

jQuery的:

$('.addBtn').click(function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('<div class="names"></div>');
    div.append(name);
    div.append("<button class='delete'>X</button>");
    contents.append(div);
    $('.name').val('');
});

$('.delete').click(function() {
    console.log('click');
});

4 个答案:

答案 0 :(得分:3)

更好的方法是使用on()函数:

$('.addBtn').on('click', function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('<div class="names"></div>');
    div.append(name).append("<button class='delete'>X</button>");
    contents.append(div);
    $('.name').val('');
});

$(document).on('click', '.delete', function() {
    console.log('click');
});​

演示:http://jsfiddle.net/tSTEK/7/

答案 1 :(得分:0)

您可以在创建元素时添加click事件:

 div.append("<button class='delete'>X</button>")
            .click(function(){
                console.log('click');
            });

Updated fiddle

或者更好的alternative是使用.live()或.on()(取决于你的jQuery版本)。

$('.delete').live('click', function() {
    console.log('click');
});​

$(document).on('click', '.delete', function() {
    console.log('click');
});​

答案 2 :(得分:-2)

使用.live或.delegate

$('.addBtn').click(function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('<div class="names"></div>');
    div.append(name);
    div.append("<button class='delete'>X</button>");
    contents.append(div);
    $('.name').val('');
});

$('.delete').live('click', function() {
    console.log('click');
});

或委托

$('.addBtn').click(function() {
        var name = $('.name').val();
        var contents = $('.contents');
        var div = $('<div class="names"></div>');
        div.append(name);
        div.append("<button class='delete'>X</button>");
        contents.append(div);
        $('.name').val('');
    });

    $('.contents').delegate('.delete', 'click', function() {
        console.log('click');
    });

编辑:不要使用实时使用! 但是我仍然会为代表而去,因为我知道这是最好的表现明智的

答案 3 :(得分:-2)

您可以使用Jquery live方法,然后只删除父元素:

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

这是小提琴:

http://jsfiddle.net/tSTEK/9/