Question

我遇到了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');
});

Answer 1

更好的方法是使用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/

Answer 2

您可以在创建元素时添加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');
});

Answer 3

使用.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');
    });

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

Answer 4

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

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

这是小提琴：

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

点击事件没有在javascript中点击

4 个答案: