jquery动态加载DOM元素，添加样式

jquery 动态添加后的dom元素，无法找到，增加样式设计
本示例利用“事件委派”功能实现
动态添加dom元素到表格，鼠标悬停动态表格元素，样式变化
一、html代码

<div>商品名称:<input type="text" id="pname"></div>
    <div>单价：<input type="text" id="price"></div>
    <div>数量：<input type="text" id="nums"></div>
   
   <button id="add">增加</button>
   <br><br>
   <table id="products">
    <tr>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>操作</td>
    </tr>
   </table> 

二、jquery代码
1、新增dom元素

  $("#add").click(function(){
                //  $("#products").append("<tr><td>书</td><td>23.2</td><td>1</td><td>删除</td></tr>")   
            // 获取用户输入的数据
            pname=$("#pname").val()
            price=$("#price").val()
            nums=$("#nums").val()
            str="<tr><td>"+pname+
                "</td><td>"+price+
                "</td><td>"+nums+"</td><td>删除</td></tr>"
            $("#products").append(str)
            
            })

2、对新增dom元素添加样式
技术要点：事件委派
jquery是on实现

 $("#products").on("mouseover","tr",function(){
            console.log($(this))
            $(this).css("background-color","red")
            // $(this).addClass("trc1")
        })
 $("#products").on("mouseout","tr",function(){
            console.log($(this))
            $(this).css("background-color","")
            // $(this).removeClass("trc1")
        })