jquery中给动态生成的标签添加点击事件

一、问题描述

在做项目的过程中，有一个需求，点击按钮，动态添加一行，然后点击删除按钮删除这一行，我首先想到的是就直接绑定点击事件，进行操作既可以了。但是，问题来了，点击删除按钮不起作用，后来发现是因为动态添加的，所以用传统的绑定方式就不起作用了。

二、解决问题

案例截图

// 点击加号添加一行条件
  let contentHtml = ''
  let currentHeight = 0 //当前div的高度
  let sunIcon = ''
  $('.add').click(function () {
   
    sunIcon = `<i class="layui-icon layui-icon-subtraction sub"></i> `
    $('.nav1').append(sunIcon)
    $('.nav2').append(sunIcon)
    contentHtml = `<div class="layui-form-item nav">
                <span>条件一</span>
                <div class="layui-inline">
                  <label class="layui-form-label">卡口:</label>
                  <div class="layui-input-inline">
                    <select class="layui-select" id="bayonet" name="bayonet"  lay-search>
                      <option value="">请选择卡口</option>
                      <option value="">卡口A</option>
                      <option value="">卡口B</option>
                      <option value="">卡口C</option>
                      <option value="">卡口D</option>
                      <option value="">卡口E</option>
                      <option value="">卡口F</option>
                      <option value="">卡口G</option>
                    </select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label special">最小出现卡口个数:</label>
                  <div class="layui-input-inline">
                    <select class="layui-select" id="bayonetNum" name="bayonetNum" lay-search>
                      <option value="">2</option>
                      <option value="">3</option>
                      <option value="">4</option>
                      <option value="">5</option>
                      <option value="">6</option>
                    </select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label&#