CODEWITHSUNDEEP
jqueryclick
Kurkula
Kurkula

Reputation: 6762

Click handler is not firing on dynamically inserted elements

I am trying to write some code that fires a click handler on some <li> elements using jQuery, but it is not working. Can anyone see why?

<li id="savedQueriesSection" class="savedQrs selected">
<a href="#">My Query 1</a></li>

$(document).ready(function () {
 $('.savedQrs').click(function () {
        alert("test");
    });
});

I am dynamically generating li like this 

$.ajax({
        type: "GET",
        url: "/Base/GetQueries",
        success: function (response) {
            $.each(response, function (i, item) {
                $(".tree").append('<li id=savedQueriesSection  class=savedQrs><a            href=#>' + item.QueryName + '</a></li>');
            });
        },
        error: function (result) {
        }
    });

Upvotes: 0

Views: 88

Answers (2)

Gourav
Gourav

Reputation: 1774

If the contents are dynamically loaded on the page then use .on() event of jquery..

on() jquery

This can be done using id

 $(document).ready(function () {
  $(document).on('click','#savedQueriesSection',function () {
        alert("test");
    });
  });

And can also be done using 'class`

 $(document).ready(function () {
   $(document).on('click', '.savedQrs', function () {
         alert("test");
    });  
 });

Upvotes: 2

Praveen
Praveen

Reputation: 56501

You should have mentioned in your question that you're generating these li's dynamically. Try to do this event using .on() event handler attachment.

$(document).ready(function () {
 $(document).on('click', '.savedQrs', function () {
        alert("test");
    });
});

Upvotes: 3

Related Questions