Trigger JQuery event on ajax response element

Question

I have a problem with event triggering in my codeigniter project. I want to load a table dynamically in my page. This table is returned from my controller through an ajax call. And I want to trigger a click event in a span in that table. I tried this in many ways, but its not working. I am attaching my code here. please help me to find a solution.

controller :

$str = '<table>
         <tr>
            <td class="cost date" id="date_'.$request['SupplyID'].'">
               <span class="editable" style="display: none;">
                  <input type="text" class="expiry" autocomplete="off" data-date-id="date_'.$request['SMSSupplyID'].'">                                    
               </span>
               <span class="cnt" style="display: inline;">Choose</span>
            </td>
          </tr>
       </table>';
echo $str;

script in view :

function loadmore()
    {
        var url;

        url =  '/SMS/SMS/loadMoreRequests';

        $.ajax({
            type: 'post',
            url: url,
            data: {
                limit:val
            },
            success: function (response) { console.log(response);

                $("#requestListTable").html(response); 
                val +=10;
            }
        });
    }

$('.date').find('.cnt').on('click', function(){ 
    console.log(1);       // for testing
});

I tried the following changes, but no use

1)

$('.date').find('.cnt').live('click', function(){ 
    console.log(1);       // for testing
});

2)

$('.date').find('.cnt').click(function(){ 
    console.log(1);       // for testing
});

Try my answer I hope it will solve your issue.

Ketan Solanki
– Ketan Solanki

2017-10-18 05:13:05 +00:00
Commented Oct 18, 2017 at 5:13 — Ketan Solanki
– Ketan Solanki, Commented Oct 18, 2017 at 5:13

Anoop Joshi P · Accepted Answer · 2017-10-18 05:11:14Z

2

$("container for the table").on("click", ".cnt", function() {


});

You can use the event delegation for this. Bind the event to a parent element which is present on the dom on document ready. Or you can simply use,

$("body").on("click", ".cnt", function() {


});

answered Oct 18, 2017 at 5:11

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naim Malek · Accepted Answer · 2017-10-18 05:12:43Z

2

You can try this

$(document).find(".cnt").on("click",function(){
    console.log(1);       // for testing
});

edited Oct 18, 2017 at 5:12

answered Oct 18, 2017 at 5:07

Naim Malek

1,1841 gold badge11 silver badges21 bronze badges

1 Comment

Anoop Joshi P Over a year ago

using just 'on' doesn't mean 'event delegation'. Your code is just as a normal click event binding.

Ketan Solanki · Accepted Answer · 2017-10-18 05:10:55Z

1

You need to delegate the Event to the dynamically created elements.

 $(document).on('click','.cnt',function(){
  alert("Processing comes here");
 });

answered Oct 18, 2017 at 5:10

Ketan Solanki

6975 silver badges13 bronze badges

1 Comment

Ketan Solanki Over a year ago

@geeth Thanks for accepting my answer . Happy to help you.

Collectives™ on Stack Overflow

Trigger JQuery event on ajax response element

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related