我遇到了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');
});
答案 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');
});
答案 1 :(得分:0)
您可以在创建元素时添加click事件:
div.append("<button class='delete'>X</button>")
.click(function(){
console.log('click');
});
或者更好的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();
});
这是小提琴: