与停止传播一起使用时，上的点击不触发功能

Question

我有一个主容器，里面有一个包装器。在包装器内部，我有一个按钮，点击它会附加一个p元素并隐藏按钮。现在点击主容器时，我想隐藏主容器，但点击包装器内的元素时，我不想隐藏主容器，所以我使用停止传播来解决这个问题。现在我遇到的问题是，一旦点击按钮，我添加了一个p元素，它工作了，但是当我点击p元素时，分配给它的函数没有触发，因为它是动态添加的，停止传播限制了它的发射。我如何解决这个问题，以便在单击动态附加的p元素时，分配给它的函数会触发。提前谢谢。

$('.mainCon').on('click', function() {
$(this).css('display', 'none')
})
$('.wrapper button').on('click', function() {
$(this).css('display', 'none')
$('.wrapper').append('<p>Click me now</p>')
})
//not working
$('.wrapper p').on('click', function() {
console.log('clicked')
})
//not working
$('.mainCon .wrapper').click(function(e) {
e.stopPropagation();
});
//also not working
/*$('body').on('click', '.mainCon > *', function(e){
e.stopPropagation();    
});*/

.mainCon {
display: flex;
width: 100%;
height: 200px;
background-color: gold;
}
.wrapper {
display: flex;
width: 70%;
height: 70%;
margin: auto;
background-color: pink;
}
.wrapper button {
height: 30%;
margin: auto;
}
.wrapper p {
text-decoration: underline;
cursor: pointer;
margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainCon">
<div class="wrapper">
<button>Click me 1st</button>
</div>
</div>

Answer 1

当您只单击该元素而不单击子元素时，让单击事件发生的一种方法是检查事件目标发生的位置。下面的代码将只在单击.mainCon时执行操作，而不是单击DOM中的其他任何地方。

$(document).on('click', (e) => {
const $container = $('.mainCon');
if($container.has(e.target).length === 0 &&  $container.is(e.target)) {
alert('Hello World!')
}
});

对于.wrapper p的第二个问题，该函数在创建p元素之前运行。因此，当您最终创建p时，它永远不会将事件侦听器添加到它。为了解决这个问题，你可以把on click函数放在append之后。

$('.wrapper button').on('click', function() {
$(this).css('display', 'none');
$('.wrapper').append('<p>Click me now</p>');

$('.wrapper p').on('click', function() {
alert('The P has been clicked!')
})
})