表格中动态添加一行并实现异步加载元素的绑定方法

表格中动态添加一行，并实现了异步加载元素的绑定的方法

//HTML代码
 <!-- jQuery 引包 -->
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<table id="myTable">
        <tr class="tableHeard">
            <td>项目名称</td>
            <td>奖励等级</td>
            <td>分数</td>
            <td>操作</td>
        </tr>
        <tr>
            <td> <input type="text" placeholder="请输入项目名称"> </td>
            <td>
                <select name="" class="thought">
                <option value="" style="display: none;">请选择项目级别</option>
                <option value="1">国家级</option>
                <option value="2">省级</option>
                <option value="3">校级</option>
            </select>
            </td>
            <td>0</td>
            <td> <button onclick="displayResult()">添加</button> <button>删除</button> </td>
        </tr>
    </table>

//js代码
  $(function() {
    
     //jQuery在异步加载的元素上绑定change事件       
            $(document).on("change", ".thought", function() {
    
    
                var options = $(this).val(); //当前选中项的value值
                //判断value值 并给后面那个显示分数的单元格赋赋固定值
                if (options == 1) {
    
    
                    // alert("aa");
                    console.log($(this).parent().next("td"));

                    $(this).parent().next("td").text("3");

                } else if (options == 2) {
    
    

                    $(this).parent().next("td").text("2");
                } else {
    
    

                    $(this).parent().next("td").text("0.5");
                }

            });

        });
        //此处变量i 使新增行在第二行的位置 一直往下加 避免加到第三行的时候又重复一直往第二行的位置新增行
        var i = 2;
        function displayResult() {
    
    
            var table = document.getElementById("myTable");
            var row = table.insertRow(i); //insertRow括号中数字表示第几行，设置为几，就从该位置开始添加新行
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = "<input type='text' placeholder='请输入项目名称'>";
            // cell2.html();
            //注意下面右侧引号中的代码不要换行 下同
            //右侧代码拼接时 若遇到双引号里面还有引号 那么里面那个引号一定要为单引号 否则出问题 
            cell2.innerHTML = "<select name='' class='thought'><option value ='' style = 'display: none;' > 请选择项目级别 </option><option value = '1' > 国家级 </option><option value = '2' > 省级</option><option value = '3' > 校级 </option></select>";
            cell3.innerHTML = "1";
            cell3.setAttribute("class", "thoughtScore");
            cell4.innerHTML = "<button οnclick='displayResult()'>添加</button> <button>删除</button>";
            i++;

        }

补充：异步加载元素的绑定的方法

jquery官网关于事件绑定和事件委托的4个方法，有这样的介绍：

1. live()：jQuery1.7之后弃用
2. bind(): 动态添加的元素无法使用该方法绑定事件
3. delegate():jQuery1.7之后被on()取代
4. on()： jQuery1.7之后引入，支持事件绑定的全部功能

由此可知，正常情况下使用的就是bind()或者on()了，而bind()无法实现在动态添加的元素上绑定事件，那么它在本实例中不能应用，我们平时使用频率很高的$('xx').click(function(){...})也是不适用的。
所以要实现在异步加载的元素上添加事件绑定需要使用on()方法。
一般来说可以直接绑定在document对象上，如这样的语法：$(document).on('click','xx',function(){...})
$(…)中的元素需要是真正绑定的元素’xx’的父级或者body上，此处是直接把事件委托在document对象上来实现事件绑定，但有时可能会没有效果，可以试着换一个更近一点的父元素。
当事件直接发生在绑定的元素上时，该程序不会被调用。