Question

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

     <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>

Answer 1

Jquery有时很难识别仅通过原始类/ id已以编程方式添加到DOM的元素。尝试使用其他选择器方法检查修改后的页面：

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

Answer 2

您的选择器不适用于页面加载后添加的DOM元素。

进行如上所述的修改以侦听文档中所有匹配的元素，或在创建的每个新元素上附加侦听器：

<html>
<body>
    <button id="add">add</button>
    <table id="cooltable">
        <tr>
            <td>cool table cell</td>
        </tr>
    </table>
    <script type="text/javascript">

        function autoPopulate(event){
            // some code
            event.currentTarget.value = "auto populated content";
        }

        let add_button = document.getElementById('add');
        add_button.addEventListener('click',(event)=>{
            let new_row = document.createElement('tr'); // create row
            let new_cell = document.createElement('td'); // create cell
            let new_input = document.createElement('input'); // create input
            new_input.type = 'text';
            new_input.value = "default content";
            new_input.addEventListener('keydown', (event)=>{ // attach listener
                autoPopulate(event);
            });
            new_cell.appendChild(new_input) // add input to cell
            new_row.appendChild(new_cell) // add cell to row
            document.getElementById('cooltable').appendChild(new_row); // add row to table
        })

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

Answer 3

问题出在这里，您是在未发生的“ keyDown”事件上添加回调，因此您的脚本未运行

要解决此问题，您应该在jquery load（）上添加eventlistener

或者，当添加或删除新节点时，应该使用.bind（'DOMNodeInserted DOMNodeRemoved'）来调用函数。

<div id='myParentDiv'> </div>

<button>Click </button>





    $("button").click(function(){
    $("#myParentDiv").append("<div class='test'></div>");
});

$("#myParentDiv").bind("DOMNodeInserted",function(){
    alert("child is appended");
});

这里正在演示 https://jsfiddle.net/vickykumarui/28edcsmb/

表格示例代码

 <div id="addButtonDiv">
    <button id="add"  >Add New</button> 
</div>
 <table id="tableAdd">
    <head>
        <tr id = "test1">
            <th >enter</th>
        </tr>
    </head>
    <body>
        <tr>
            <td>
              Test 1
            </td>
        </tr>
    </body>
</table>

var  numberOFRow = 1;
$("#add").click(function(){
numberOFRow++
    $('#tableAdd tr:last').after('<tr id = test'+numberOFRow +'><td> Test' + numberOFRow + '</td></tr>')
});

$("#tableAdd").bind("DOMNodeInserted",function(){
    alert("Row number"+ numberOFRow+ "created");
});

您的表格示例的工作演示https://jsfiddle.net/vickykumarui/qpxL8k4c/

动态添加行并运行脚本

3 个答案: