Question

因为我是JS / jQuery的新手，所以它可能是一个明显的问题（但没有抛出异常）。我读到我无法使用.onclick所以我尝试了这种方法.on（＆＃34;点击＆＃34; ...）

我尝试构建一个在单击的行下添加新行的表。这也适用于新创建的行。

我的HTML：

<tbody>
    <tr id="line1"><td>Stuff1</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
    <tr id="line2"><td>Stuff2</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
    <tr id="line3"><td>Stuff3</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
    <tr id="line4"><td>Stuff4</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
</tbody>

我的JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script>    

    $(document).ready(function(){ 
        $("tr").on("click",function(){
            var childId = $(this).attr("id")+1;
            if($("#"+childId).length){
                $("#"+childId).toggle();
            }else{
                $(this).after('<tr id="'+childId+'"><td>Stuffxxxx</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>');
                //AJAX
            }
        });
    }); 
</script>

感谢您的帮助！ :)

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script>    

    $(document).ready(function(){ 
        $("table").on("click","tr", function(){
            var childId = $(this).attr("id")+1;
            if($("#"+childId).length){
                $("#"+childId).toggle();
            }else{
                $(this).after('<tr id="'+childId+'"><td>Stuffxxxx</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>');
                //AJAX
            }
        });
    }); 
</script>

.on（＆＃34;点击＆＃34;，...）不处理使用相同的点击功能创建的对象

1 个答案: