Id is not working on dynamically added td content

Question

I have dynamically added td content using jquery and added a functionality to remove the tr on click of td but the id is not working on dynamic content though its working on static I have dynamically added td content using jquery and added a functionality to remove the tr on click of td but the id is not working on dynamic content though its working on static I have dynamically added td content using jquery and added a functionality to remove the tr on click of td but the id is not working on dynamic content though its working on static I have dynamically added td content using jquery and added a functionality to remove the tr on click of td but the id is not working on dynamic content though its working on static

i have tried using jquery for the first time as i am not familiar to it

<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();
                    }
                });
            });
        });

score 1 · Answer 1 · edited Dec 28 '18 at 12:57

1

try :

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

edited Dec 28 '18 at 12:57

Tiago Martins Peres

14,289
18
86
145

answered Dec 28 '18 at 11:55

Dhruv Raval

1,535
1
8
15

score 1 · Answer 2 · answered Dec 28 '18 at 11:59

1

Try converting your markup variable to a jquery object before the append

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

answered Dec 28 '18 at 11:59

Alibech

46
3

score 0 · Answer 3 · answered Dec 28 '18 at 11:56

0

You should use event delegation like below for existing one or future.

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

answered Dec 28 '18 at 11:56

Ganesan Karuppasamy

322
2
8

i replaced my delete-row functionality with yours but its not working – juhi Dec 28 '18 at 12:02
Please look into this http://jsfiddle.net/samliew/3AJcj/2/ – Ganesan Karuppasamy Dec 28 '18 at 12:36

Id is not working on dynamically added td content

3 Answers3