MVCを使って画像をクリックすることでアンカータグからID値onclick関数を渡す方法は？

Question

データベースの値に基づいて、ステータスはYまたはNになります.Yの場合、active.pngが表示されます。それは正常に動作しています。私がactive.png画像をクリックするとアンカータグonclick="GetRecords1(' + item.ModuleID + ');機能ID値はイベントに渡されません。

active.png画像を渡す方法ID値をクリックします。

<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)" onclick="GetRecords1(' + item.ModuleID + ');" 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> 

パス：あなたはインラインではJavaScriptを使用しているのはなぜ

<script> 
    $(document).ready(function() { 
     $('#example tbody').on('click', function GetRecords1(ModuleID) { 
      var id = ModuleID; 
      alert("Status Clicked:" + ModuleID); 
     }); 
    }); 
</script> 

Answer 1

。イベントデリゲートonを使用して、クリックイベントを簡単にバインドできます。

ここにあなたの修正コードがあります。

Status = '<a href="JavaScript:void(0)" data-id="@item.ModuleID" data-status="@item.Status" class="user-status" title="Disable status"><img src="/img/Active.png" height="22" width="42"/></a>' 

は、タグにクラスユーザーのステータスを追加しました。 idをdata-id属性に割り当てます。

clickイベントからIDを取得します。

$(document).on('click','.user-status', function(){ 
    var getId = $(this).data('id'); 
    var getStatus = $(this).data('status'); 
    alert("Status Clicked:" + getId); 
});