CODEWITHSUNDEEP
jqueryhtmldynamic
Atul
Atul

Reputation: 1711

How to make event available for dynamically added html jquery?

I am doing some process that is running fine for first time loaded content using - 

$("#daily-table").find("td.user-slot").mousedown(function (e) {
   Some Process 
}

But its not working for dynamically added html, in 'daily-table' tag. Here is the code that i am trying for Dynamically added html - 

$(document).on("mousedown", "#daily-table > td.user-slot" , function(e) { 
   Some Process 
}

Here is the HTML structure - 

<table id="daily-table" class="slotsdata">
<tbody>
    <tr class="tr-scheduled startTimeRow odd" >
        <td class="timetitle time-slot"><span>10:00 AM</span></td>
        <td class="user-slot" ><a href="#" data-toggle="modal" class="tx-white tx-11 tx-medium">Anchor1</a></td>
        <td class="user-slot" ><a href="#" data-toggle="modal" class="tx-white tx-11 tx-medium">Anchor2</a></td>
    </tr>
    <tr class="tr-scheduled startTimeRow odd" >
        <td class="timetitle time-slot"><span>11:00 AM</span></td>
        <td class="user-slot" ><a href="#" data-toggle="modal" class="tx-white tx-11 tx-medium">Anchor3</a></td>
        <td class="user-slot" ><a href="#" data-toggle="modal" class="tx-white tx-11 tx-medium">Anchor4</a></td>
    </tr>
<tbody>

Plz help me to solve this ... Thanks

Upvotes: 0

Views: 71

Answers (2)

George
George

Reputation: 36784

Your td.user-slot element is not an immediate descendant of #daily-table, so don't use the Child Combinator

$(document).on("mousedown", "#daily-table td.user-slot" , function(e) {
    /* 'this' refers to the <td> DOM element */

    const $td = $(this);
    /* $td is now a jQuery collection containing the DOM element */
});

Upvotes: 1

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Try like this:

$(document).on("mousedown", ".time-slot").function(e) { 
   //Some Process 
};

Upvotes: 0

Related Questions