Question

我无法编辑新添加的行。我已经在新添加的行中包含了该类。但是，当我单击新添加的行中的编辑按钮时，它不起作用。此外，一旦我编辑了该行，“编辑”按钮将不起作用。我不能两次编辑同一行。单击按钮编辑时，该函数未调用。你们可以帮我吗？

以下是我的问题的再现-

$(document).ready(function(){
    $('#add').on('click',()=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
                    var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
                    $('#name').val()+'</td><td>'
                    +$("#age").val()+
                    '</td><td>'+
                    '<button type="button"  class="edit" >Edit</button>'+
                    '</td></tr>';
                    $('#table tbody').append(addrow);
                    $('.add-input').val('');
                    $(this).dialog("close");
                }
            }
        });    
    })
    $("#delete").on("click", function () {
        $('table tr').has('input:checked').remove();
    })
    $('#deleteall').on('click',function(){
        $('tbody tr').remove();
    })
    $('.edit').on('click',(event)=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
        var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
        $('#name').val()+'</td><td>'
        +$("#age").val()+
        '</td><td>'+
        '<button type="button" class="edit">Edit</button>'+
        '</td></tr>';
        $(event.currentTarget).parents('tr').replaceWith(name);
        console.log($('tr'));
        $('.add-input').val('');
        $(this).dialog("close");
        }
        }
    })    
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table edit</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
    <div class="table-wrap">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Age</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Sakthi</td>
                <td>20</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Prabhu</td>
                <td>21</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="op">
    <button type="button"  class="mod" id="add">Add</button>
    <button type="button"  class="mod" id="delete">Delete</button>
    <button type="button"  class="mod" id="deleteall">Delete All</button>

    </div>
    <div class="popup" id="popup" style="display:none;">
        <input type="text" placeholder="Name" class="add-input" id="name">
        <input type="number" placeholder="Age" class="add-input" id="age">
    </div>  
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>

我可以不使用onclick（）吗？怎么做？

Answer 1

问题在于，当您为.edit加载onclick侦听器时，只有两个按钮，脚本不知道新闻行。如果要动态添加行，则需要另一个上下文来执行它。只需将其替换：

$('.edit').on('click',(event)=>{...})

作者

$("tbody").on("click", ".edit", (event) =>{...})

更新：打开编辑框时，您可以选择name和age：

$(document).ready(function(){
    $('#add').on('click',()=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
                    var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
                    $('#name').val()+'</td><td>'
                    +$("#age").val()+
                    '</td><td>'+
                    '<button type="button"  class="edit" >Edit</button>'+
                    '</td></tr>';
                    $('#table tbody').append(addrow);
                    $('.add-input').val('');
                    $(this).dialog("close");
                }
            }
        });    
    })
    $("#delete").on("click", function () {
        $('table tr').has('input:checked').remove();
    })
    $('#deleteall').on('click',function(){
        $('tbody tr').remove();
    })
    $("tbody").on("click", ".edit", event => {    
    let $btnParentSiblings = $(event.currentTarget).parent().siblings('td')

    let $name = $btnParentSiblings[1];
    let $age = $btnParentSiblings[2];

    $("#popup > #name").val($($name).html());
    $("#popup > #age").val($($age).html());
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
        var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
        $('#name').val()+'</td><td>'
        +$("#age").val()+
        '</td><td>'+
        '<button type="button" class="edit">Edit</button>'+
        '</td></tr>';
        $(event.currentTarget).parents('tr').replaceWith(name);
        console.log($('tr'));
        $('.add-input').val('');
        $(this).dialog("close");
        }
        }
    })    
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table edit</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
    <div class="table-wrap">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Age</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Sakthi</td>
                <td>20</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Prabhu</td>
                <td>21</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="op">
    <button type="button"  class="mod" id="add">Add</button>
    <button type="button"  class="mod" id="delete">Delete</button>
    <button type="button"  class="mod" id="deleteall">Delete All</button>

    </div>
    <div class="popup" id="popup" style="display:none;">
        <input type="text" placeholder="Name" class="add-input" id="name">
        <input type="number" placeholder="Age" class="add-input" id="age">
    </div>  
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>

Answer 2

因为一旦文档完全加载，JavaScript代码便开始运行，并且此时会搜索具有edit类的所有元素，并将其click事件分配给编辑方法。因此，当您添加新元素时，必须将方法手动分配给其编辑按钮。

无法编辑新添加的行

2 个答案: