Método de vinculação para adicionar dinamicamente uma linha na tabela e implementar carregamento assíncrono de elementos

Adicione dinamicamente uma linha à tabela e realize o método de ligação de carregar elementos de forma assíncrona

//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++;

        }

Adicionado: método de ligação para carregar elementos de forma assíncrona

O site oficial do jquery apresenta uma introdução aos quatro métodos de vinculação e delegação de eventos:

1. live (): obsoleto após jQuery1.7
2. bind (): elementos adicionados dinamicamente não podem usar este método para vincular eventos
3. delegado(): substituído por on() após jQuery1.7
4. on(): introduzido após jQuery1.7, suporta todas as funções de ligação de evento

Pode-se ver que em circunstâncias normais, bind() ou on() é usado, e bind() não pode vincular eventos em elementos adicionados dinamicamente, portanto não pode ser aplicado neste exemplo, e geralmente o usamos com frequência também não é $('xx').click(function(){...})aplicável .
Portanto, para implementar a adição de ligação de evento em elementos carregados de forma assíncrona, você precisa usar o método on().
De um modo geral, pode ser vinculado diretamente ao objeto do documento, como esta sintaxe: $(document).on('click','xx',function(){...})
O elemento em $(…) precisa ser o pai ou o corpo do elemento 'xx' que está realmente vinculado. Aqui, o evento é delegado diretamente aos objetos do documento para implementar a ligação de eventos, mas às vezes pode não funcionar, você pode tentar mudar para um elemento pai mais próximo.
Este procedimento não é chamado quando o evento ocorre diretamente no elemento vinculado.