.append（）和.html（）

Question

我的代码：https://jsfiddle.net/hbli/xyeoatf9/1/

我想将事件监听器添加到动态元素：

$('.parent').on('mousedown', function(e){
    $('.parent').html('<div class="child"></div>');
    //$('.parent').append('<div class="child"></div>');
    console.log('parent mousedown');
})

$('body').on('click', '.child', function(e){
    console.log('child click');
})

如果我使用＆＃39; $('.parent').html('<div class="child"></div>');＆＃39;，则不会在＆＃39; .child＆＃39;上触发点击事件。元件。 但是，如果我将.html更改为.append，则可以触发事件。

我想知道为什么他们有不同的行为？

感谢。

Answer 1

问题是因为您在.child元素上使用了委托事件处理程序。因此，事件必须通过.parent元素传播，因此mousedown事件处理程序会在.child点击之前触发。

这意味着当您使用html()时，.child将被删除，然后重新创建。反过来，当您使用append()时，.child元素仍然存在，以便在其上运行委派的点击事件。

Answer 2

当您使用html()覆盖内容时，.child元素不再存在，因此不会传播事件。

使用.append()时.child存在并传播事件。所以你收到了消息

Answer 3

添加一个计数器让我们确认当.child被保留时会触发click事件，但是当它被替换时，你会得到一个不会发起任何事件的不同的.child

注意你如何在另一个<.p>上的.child和mouseup上执行mousedown

let counter = 0;
$('.parent').on('mousedown', function(e){
    ++counter;
    $('.parent').html('<div class="child">' + counter + '</div>');
    //$('.parent').append('<div class="child">' + counter + '</div>');
    console.log('parent mousedown');
})

$('body').on('click', '.child', function(e){
    console.log('child click: ' + $(this).html());
})

$('body').on('mouseup', '.child', function(e){
    console.log('child mouseup: ' + $(this).html());
})

$('body').on('mousedown', '.child', function(e){
    console.log('child mousedown: ' + $(this).html());
})

.parent {
  width:400px;
  height:200px;
  background-color: green;
}

.child {
  width:200px;
  height:20px;
  background-color: yellow;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="parent"></div>

Answer 4

如果你想使用方法HTML并且仍想在“.child”元素上添加一个事件，你可以简单地在标签本身中分配事件方法，例如

$('.parent').on('mousedown', function(e){
    $('.parent').html('<div class="child" onclick="clickMethod();"></div>');
    console.log('parent mousedown');
})

function clickMethod()
{
    console.log('child click');
}

Answer 5

以下是并排演示

＆＃13;

＆＃13;

let counter1 = 0;
$('.parent-replace').on('mousedown', function(e){
    ++counter1;
    $('.parent-replace').html('<div class="child">' + counter1 + '</div>');
    console.log('parent-replace mousedown');
})

let counter2 = 0;
$('.parent-append').on('mousedown', function(e){
    ++counter2;
    $('.parent-append').append('<div class="child">' + counter2 + '</div>');
    console.log('parent-append mousedown');
})

$('body').on('click', '.child', function(e){
    console.log('child click: ' + $(this).html());
})

$('body').on('mouseup', '.child', function(e){
    console.log('child mouseup: ' + $(this).html());
})

$('body').on('mousedown', '.child', function(e){
    console.log('child mousedown: ' + $(this).html());
})

＆＃13;

.parent {
  width:200px;
  height:200px;
}

.parent-replace {
  background-color: green;
}

.parent-append {
  background-color: blue;
}

.child {
  width:200px;
  height:20px;
  background-color: yellow;
}

.side-by-side {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="side-by-side">
  REPLACING child
  <div class="parent-replace parent"></div>
</div>

<div class="side-by-side">
  APPENDING children
  <div class="parent-append parent"></div>
</div>

＆＃13;

＆＃13;

＆＃13;