<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

​

<h1>展示jQuery中on()和click()的区别</h1>

​

<p>

    <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>

</p>

<div class="test">

    <button class="new" id="newon">NewOn</button> 

    <button class="new" id="newclick">NewClick</button>

    <ul class="li"> 

        <li>原先的HTML元素on<button class="deleteon">Delete</button></li> 

        <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 

    </ul> 

</div>

$("#newclick").click(function(){ 

    $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 

});

$("#newon").click(function(){ 

    $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 

});

$(".delete").click(function(){ 

    $(this).parent().remove(); 

}); 

​

$(".li").on('click', ".deleteon", function(){

    $(this).parent().remove(); 

})

$(".deleteclick").click(function(){ 

    $(this).parent().remove(); 

});