画像をクリックしてアンカータグからonClick関数を呼び出す方法は？

Question

データベースの値に基づいてステータスはYまたはNになります。 Yの場合はactive.pngと表示されます。それは正常に動作しています。 active.pngイメージをクリックすると、アンカータグid="activeStatus" onclick関数が機能していません。

<script> 
     $(document).ready(function() { 

      $("#DomainID").change(function() { 

       var id = $(this).val(); 
       $("#example tbody tr").remove(); 

       $.ajax({ 

        type: 'POST', 

        url: '@Url.Action("ViewModules")', 
        dataType: 'json', 
        data: { id: id }, 
        success: function (data) { 
         var items = ''; 
         $.each(data.EmpList, function (i, item) { 
          $("#findValue").show(); 

          /*Find Role here - Comparing Emp List ModuleId to RoleList ModuleId*/ 

          var RoleName = $(data.role).filter(function (index, item) { 
           return item.ModuleID == item.ModuleID 
          }); 

          if (item.ParentModuleID == -1) { 

           item.ModuleName = " -- " + item.ModuleName 
          } 
          else { 
           item.ModuleName = item.ModuleName 
          } 

          var Status = ''; 
          if (item.Status == "Y") { 
           Status = '<a href="JavaScript:void(0)" id="activeStatus" title="Disable status"><img src="/img/Active.png" height="22" width="42"/></a>' 
          } else { 
           Status = '<a href="JavaScript:void(0)" id="inActiveStatus" title="Active status"><img src="/img/InActive.png" height="22" width="42"/></a>' 
          } 

          var rows = "<tr>" 
          + "<td>" + (i + 1) + "</td>" 
          + "<td>" + item.ModuleName + "</td>" 
          + "<td>" + item.Url + "</td>" 
          + "<td>" + RoleName[i].RoleName + "</td>" 
          + "<td>" + '<a href="@Url.Action("EditModules", "Account")?id=' + item.ModuleID + '" class="font-icon font-icon-pencil" title="Edit"></a>&nbsp;&nbsp;&nbsp;' + Status + "</td>" 
           + "</tr>"; 
          $('#example tbody').append(rows); 
         }); 
        }, 
        error: function (ex) { 
         var r = jQuery.parseJSON(response.responseText); 
         alert("Message: " + r.Message); 
         alert("StackTrace: " + r.StackTrace); 
         alert("ExceptionType: " + r.ExceptionType); 
        } 
       }); 
       return false; 
      }); 
     }); 
    </script> 

Clickイベント：

<script> 
     $(document).ready(function() { 
      $('#activeStatus').on('click', function() { 
       alert("Status Clicked"); 
      }); 
     }); 
    </script> 

Answer 1

あなたはdynamically追加要素のための.on方法ではなくを使用しています。

を動的に追加した要素の場合は、event delegatioを使用する必要があります。。

イベントの代表団は、私たちはそれらの子孫が現在存在しないか 将来的に追加されているかどうか、 セレクタに一致するすべての子孫のために発生します 親要素に、単一のイベントリスナーをアタッチすることができます。

$(document).ready(function() { 
     $('#example tbody').on('click', '#activeStatus', function() { 
      alert("Status Clicked"); 
     }); 
}); 

方法3パラメータを指定して呼び出す必要があります：

• イベント
• ターゲット要素

あなたはbindクリックイベントハンドラ.on()方法を使用しなければなりませんコールバックイベントがトリガーされた後に関数が実行されます。