jQuery — append(), then .click() + $(this).parent()

Question

有没有办法向附加的html元素添加单击函数？此外，是否可以对该附加元素的父元素执行某些操作？例如，添加或删除其直接父级的类？

下面是一些伪代码：

//玉

.container.test
  .content
    | Some content

//.JS

$('.content').append('<button>Button</button>')
$('button').on('click', function() {
  $(this).parent('.container').removeClass('test')
})

Answer 1

是的。

var $button = $('<button>').text('Button');
$('.content').append($button);
$button.on('click', function() {
  $button.parent('.container').removeClass('test')
})

这就是为什么最佳实践是使用 jQuery(或您选择的其他库(创建 HTML 元素，然后追加/预置/替换元素，而不是追加/预置/替换原始 HTML 字符串。

Answer 2

你也可以做如下的事情：

$('.content').append($('<button>Button</button>').click(function() {
   $(this).parent('.container').removeClass('test');
}));

另一种解决方案是使用事件委派(document 上绑定事件(。

$('.content').append('<button>Button</button>');
$(document).on('click', '.content button', function() {
  $(this).parent('.container').removeClass('test');
});