I'm creating dynamic elements using jquery and try to bind listener for elements. by binding listener using
$('#div11').on('click',$('#textbox31'),function(e){showPopupImage(e);});
$('#div11').on('click',$('#textbox32'),function(e){alert('hi');});
function,it adds listener to descendents even though i specify the particular field to bind.
pls,suggest me the good way to handle my situation.
The problem is that you are not specifying the correct parameters to the on function. If you look at the JQuery documentation, you are using the following function overload:
.on( events [, selector ] [, data ] )
The part you are specifying incorrectly is the selector parameter. This parameter requires a selector string, not a JQuery objct.
The following will work:
$('#div11').on('click','#textbox31',function(e){showPopupImage(e);});
$('#div11').on('click','#textbox32',function(e){alert('hi');});
Notice I have replaced $('#textbox31') with '#textbox31'.
Here is a working example, you will see that the click event is not applied to textbox33 and textbox34
Try it :
$('#div11').on('click', '#textbox31',function(e){
showPopupImage(e);
});
$('#div11').on('click', '#textbox32', function(e) {
//do something
});
Using .on() you can define you function once, and it will execute for any dynamically added elements.
