单击事件在javascript中不会被单击

click event doesnt get clicked in javascript

本文关键字：单击 javascript 事件      更新时间：2023-09-26

我对jquery点击事件有问题。以下是我的应用程序的功能。用户在文本字段中输入姓名。当他点击add按钮时，这个名称就会出现在contents-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');
});

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

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

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

更新的fiddle

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

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

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

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

小提琴在这里：

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

使用.live或.delete

$('.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');
    });

编辑：不要在上使用live use！但据我所知，我仍然会支持委托原因，这是性能最好的

相关文章：