0

我有 jquery 点击事件的问题。这是我的应用程序的作用。用户在文本字段中输入名称。当他单击添加按钮时，该名称将出现在内容 div 标记中。此名称还有一个删除按钮。现在的问题是当用户单击删除按钮时，它没有给出任何响应。那么我怎样才能使这项工作呢？

这是我的代码

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

4 回答 4

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/

于 2012-08-05T09:50:24.430 回答
0

您可以在创建元素时添加点击事件：

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

更新的小提琴

或者更好的选择是使用 .live() 或 .on() （取决于您的 jQuery 版本）。

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

$(document).on('click', '.delete', function() {
    console.log('click');
});​
于 2012-08-05T09:46:02.357 回答
-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');
    });

编辑：不要使用现场使用代替！但据我所知，我仍然会选择代表事业，这是最好的表现

于 2012-08-05T09:48:18.243 回答
-2

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

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

这是小提琴：

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

于 2012-08-05T09:49:58.410 回答