Question

有没有办法将点击功能添加到附加的html元素？另外，是否可以对附加元素的父元素执行某些操作？例如，添加或删除其直接父级的类？

这是一些伪代码：

// Jade

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

jQuery - append（），然后.click（）+ $（this）.parent（）

2 个答案: