jQuery selectors does not recognize ny dynamically created HTML input function

Question

I am injecting HTMl code into the dom using Ajax. It does this sucessfully but my jQuery selector does not work for this HTML input

So if i do the following in my Jquery it does not get recognized...

$("input[id*='cb_Compare']").click(function ()

However if i assign the input with an onclick function in my server side code thatworks.

What is this sorcery?

Answer 1

If the DOM is added dynamically, you need to use event delegation. Read this link for further understanding. Event Delegation

$(document).on('click',"input[id*='cb_Compare']",function (){
  //your code
});

Answer 2

Use event delegation with immediate parent selector is best way to do dynamically created elements

$("#parentSelector").on("click", "input[id*='cb_Compare']" , function() { 

          // your code here
});

or

$(document).on("click", "input[id*='cb_Compare']" , function() { 

              // your code here
    });

Answer 3

Since you are generating HTML dynamically with jQuery so you have to use event delegation in order to bind the click() event as shown :-

$(document.body).on('click','input[id*="cb_Compare"]',function(){
  //...your stuff
});