Question

我已经使用jquery动态添加了td内容，并添加了删除td单击时的tr的功能，但是id虽然对静态内容有效，但对动态内容无效我已经使用jquery动态添加了td内容，并添加了删除td单击时的tr的功能，但id在动态内容上不起作用，尽管它在静态上起作用我已经使用jquery动态添加了td内容，并添加了删除td单击时的tr的功能，但id在动态内容上不起作用，尽管它在静态上起作用我已经使用jquery动态添加了td内容，并添加了删除td单击时的tr的功能，但id不能用于动态内容，尽管它适用于静态

我第一次尝试使用jquery，因为我对此并不熟悉

<div class="add-task">
                                        <div class="cross-icon add-new" id="hide-add-task">
                                            <img src="./images/Deleteicon.png" alt="">
                                        </div>
                                        <form class="add-task-form">
                                            <input type="text" id="task" class="add-task-input">
                                        </form>
                                    </div>
                                    <div class="custom-toggle">
                                        <div class="delete-task">
                                            <span>Are you sure you want to delete this task?</span>
                                            <div class="custom-choice">
                                                <span class="delete-row">Yes</span>
                                                <span id="hide-delete-alert">NO</span>
                                            </div>
                                        </div>
                                    </div>



<div class="custom-hyperlink"><span class="add-new-txt" id="show-add-task">Add New</span></div>



<tbody class="custom-table-body">
                                                <tr>
                                                    <td>
                                                        <label class="custom-checkbox">
                                                            <input type="checkbox" name="task">
                                                            <div>Check air pressure in tyres</div>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </td>
                                                    <td><div class="ellipsis-txt">-</div></td>
                                                    <td><div class="ellipsis-txt">12/26/18</div></td>
                                                    <td><div class="ellipsis-txt">Service Center</div></td>
                                                    <td>
                                                        <img src="./images/Edit-icon.png" alt="edit" class="custom-img m-rt-16">
                                                        <img src="./images/delete-icon.png" alt="delete" class="custom-img" id="show-delete-alert">
                                                    </td>
                                                </tr>
                                            </tbody>


$(document).ready(function(){
            $("#hide-add-task").click(function(){
                $(".add-task").hide();
            });
            $("#show-add-task").click(function(){
                $(".add-task").show();
            });

            $("#hide-delete-alert").click(function(){
                $(".custom-toggle").hide();
            });
            $("#show-delete-alert").click(function(){
                $(".custom-toggle").show();
            });

            //ADD
            $(".add-new").click(function(){
            var task = $("#task").val();
            var markup = `<tr>
                            <td>
                                <label class='custom-checkbox'>
                                    <input type='checkbox' name='task'>
                                    <div>`+ task +`</div>
                                    <span class='checkmark'></span>
                                </label>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <img src='./images/Edit-icon.png' alt='edit' class='custom-img m-rt-16'>
                                <img src='./images/delete-icon.png' alt='delete' class='custom-img'>
                            </td>
                        </tr>`;

            $("table tbody").append(markup);
            });

            // DELETE
            $(".delete-row").click(function(){
                $("table tbody").find('input[name="task"]').each(function(){
                    if($(this).is(":checked")){
                        $(this).parents("tr").remove();
                    }
                });
            });
        });

Answer 1

尝试：

$(document).on("click",".show-delete-alert",function(){ 
    // Do something
});

Answer 2

尝试在添加之前将标记变量转换为jquery对象

var jqMarkup = $(markup);
$("table tbody").append(jqMarkup);

Answer 3

对于现有的事件或将来的事件，应使用以下事件委托。

$(".delete-row").on('click',function() {
            $("table tbody").find('input[name="task"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
});

ID无法处理动态添加的TD内容

3 个答案: