Question

我有一个像这样填充的表，代码如下。当我从这里获得表数据时，我得到了图像，但之后我无法点击图像。我不知道为什么我无法点击它，任何人都可以帮忙。

 $('#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);

并点击图片代码如下

  $(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);


          });
      });

Answer 1

鉴于您正在动态填充DOM，

替换此行：

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

这一个：

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

Answer 2

由于您将click事件应用于动态元素，我建议您像这样使用.live（）：

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

并使用jquery版本1.7

无法点击td内的图片

2 个答案: