javascript - 动态添加行并运行脚本

标签 javascript jquery html

我有一个在单击按钮时动态创建行的表。该输入框包含一个自动建议脚本。当我尝试在第一个框(默认创建的框)上执行输入时,自动完成工作正常。但是,在执行动态添加行时,该行的脚本不起作用。如何在新的上调用自动完成脚本?

     <html>
      <body>
 <div id="addButtonDiv">
    <button id="add"  >Add New</button> 
</div>
 <table id="tableAdd">
    <head>
        <tr>
            <th >enter</th>
        </tr>
    </head>
    <body>
        <tr>
            <td>
               {!! Form::text('nameId', null,['class'=>'form-control auto', 'placeholder' => 'name']) !!}
            </td>
        </tr>
    </body>
</table>
<script type="text/javascript">
    $(document).ready(function () 
    {
         $("#add").click(function() 
         { 
             $('#tableAdd tr:last').after('<tr><td>{!! Form::text('project_manager_name', null,['class'=>'form-control pmID', 'placeholder' => 'Project Manager']) !!}</td></tr>')
        });
    }); 
    $(".auto")
            .on("keydown", keyDownEventForProjectAndCompetencyLead)
            .autocomplete(
                    {
                        //function that autocompletes the input
                    });


</script>
</body>
</html>

最佳答案

Jquery 有时在识别仅通过原始类/id 以编程方式添加到 DOM 的元素时会遇到一些麻烦。尝试使用不同的选择器方法来检查修改后的页面:

 $(document)
        .on("keydown", ".auto", keyDownEventForProjectAndCompetencyLead)
        .autocomplete( // etc )

关于javascript - 动态添加行并运行脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57615876/

相关文章:

jquery - 使用 JQUERY 的正确 AJAX GET 结构

javascript - 如何比较两个函数中定义的两个JavaScript变量值

javascript - 在鼠标悬停并单击时播放单独声音的有效方法?

javascript - Firebase登录成功后如何链接到下一页?

javascript - 在表格单元格中自动调整背景图像

javascript - momentjs toDate - 不同客户端/浏览器上的不同输出

jquery - css 左帮助 jquery

javascript - 无法读取旁边未定义的属性 'length'

javascript - 如何将 JavaScript 对象值转换为数组

javascript - 使用jquery对页面上的div元素进行排序