Unable to click on image inside a td

Question

I have a table which populate like this, code is given below. when i got the table data from this, i got the image but after that i am unable to click on image. I dont know why i am unable to click it, can anyone please help.

 $('#tbdydata').html('');
  var FinalHTML = '';
 $.each(data, function (i, item) {
 var html = "<tr><td>" + item.StructureName + "</td>";
        html += "<td>" + item.BuildingValue + "</td>";
                            html += "<td>" + item.AvgCapacity + "</td>";
                            html += "<td>" + item.PeakCapacity + "</td>";
                            html += "<td>" + item.TenureValue + "</td>";
                            html += "<td>" + item.StoreysValue + "</td>";
                            html += "<td>" + item.ConditionValue + "</td>";
                            html += "<td id=" +item.StructureName + ">" + "<a class=" + "dltCls" + ">" + "<img src='../Images/icon_delete.png' alt='Delete' title='Delete Structure' />" + "</a>" + "</td>" + "</tr>";                    

                            FinalHTML = FinalHTML + html;                                       
                        });
                        $('#tbdydata').html(FinalHTML);

and click image code is given below

  $(document).ready(function () {
          //$('#myClass').click(function () {
          $("[class=dltCls]").click(function () {
              //  $('tr:selected').each(function () {
              //
              $this = $(this);
              alert(this);
              var StructureName = $this.parent().siblings('td').eq(0).text();
              var AvgCpcty = $this.parent().siblings('td').eq(2).text();
              var PeakCapacity = $this.parent().siblings('td').eq(3).text();
              var StructureID1 = $this.parent().siblings('td').eq(7).text();
              var StructureID = $('#hdnStructID_' + StructureName).val();
              var BuildingAge = $('#hdnBuilding_' + StructureName).val();
              var Tenure = $('#hdnTenure_' + StructureName).val();
              var Storey = $('#hdnStorey_' + StructureName).val();
              var Condition = $('#hdnCondition_' + StructureName).val();
              //alert(StructureID + ' ' + StructureName + ' ' + BuildingAge + ' ' + Tenure + ' ' + Storey + ' ' + Condition + ' ' + Storey);
              //                  alert($('#hdnTenure').val());
              //                  alert($('#hdnStorey').val());
              //                  alert($('#hdnCondition').val());
              //                  alert($this.parent().siblings('td').eq(4).val());
              //                  alert(StructureName + ' ' + AvgCpcty + ' ' + PeakCapacity);
              $('#txtStructName').val(StructureName);
              $('#txtAvgCap').val(AvgCpcty);
              $('#txtPkCap').val(PeakCapacity);
              $('#txtStructureID').val(StructureID);
              $('#AddStructure').hide();
              $('#UpdateStructure').show();
              $("#ddlTenure").val(Tenure);
              $("#ddlStorey").val(Storey);
              $("#ddlCondition").val(Condition);
              $("#ddlBldgAge").val(BuildingAge);
              $("#hdnUpStructID").val(StructureID);


          });
      });

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Shaunak D, Apr 10 '15 at 06:15

Mysteryos · Answer 1 · 2015-04-10T06:23:46.090

0

Given that you are dynamically populating the DOM,

Replace this line:

$("[class=dltCls]").click(function () {

with this one:

$('body').on('click','.dltCls',function() {

edited Apr 10 '15 at 06:23

answered Apr 10 '15 at 06:16

Mysteryos

5,581
2
32
52

@Mysteryos Still it in not working, not got a single which solve my problem – Shiva Roy Apr 10 '15 at 07:23
Then it should be a css problem. Add `a.dltCls {display: inline-block;}` to your CSS file. – Mysteryos Apr 10 '15 at 07:31

score 0 · Answer 2 · answered Apr 10 '15 at 06:26

0

Since you are applying the click event to a dynamic element, I suggest you to use .live() like this:

$("[class=dltCls]").live("click", function () {

and use jquery version 1.7

answered Apr 10 '15 at 06:26

Brijesh Bhatt

3,810
3
18
34

Unable to click on image inside a td

2 Answers2