Javascript 如何通过单击图像从锚定标记调用onClick函数？

根据数据库值，状态将为

Y

或

N

。如果它

Y

表示它将

激活。将显示png

。它工作得很好。当我单击

active.png

image时，锚定标记

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>

$（文档）.ready（函数（）{
$（“#域ID”）.change（函数（）{
var id=$（this.val（）；
$（“#示例tbody tr”）.remove（）；
$.ajax({
键入：“POST”，
url:“@url.Action（“ViewModules”）”，
数据类型：“json”，
数据：{id:id}，
成功：功能（数据）{
var项目=“”；
$.each（data.EmpList，函数（i，项）{
$（“#findValue”）.show（）；
/*在此处查找角色-将Emp列表ModuleId与角色列表ModuleId进行比较*/
var RoleName=$（data.role）.filter（函数（索引，项）{
return item.ModuleID==item.ModuleID
});
if（item.ParentModuleID==-1）{
item.ModuleName=“--”+item.ModuleName
}
否则{
item.ModuleName=item.ModuleName
}
var状态=“”；
如果（项目状态=“Y”）{
状态=“”
}否则{
状态=“”
}
var rows=“”
+“+（i+1）+”
+“”+item.ModuleName+“”
+“”+项。Url+“”
+“+RoleName[i]。RoleName+”
+“”+“”+状态+“”
+ "";
$（'#示例tbody'）。追加（行）；
});
},
错误：函数（ex）{
var r=jQuery.parseJSON（response.responseText）；
警报（“消息：+r.Message”）；
警报（“StackTrace:+r.StackTrace”）；
警报（“异常类型：+r.ExceptionType”）；
}
});
返回false；
});
});

单击事件：

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

$（文档）.ready（函数（）{
$（'#activeStatus'）。在（'单击'，函数（）{
警报（“单击状态”）；
});
});

您正在使用

.on

方法，但不用于

动态添加的元素

对于动态添加的元素，必须使用
event delegatio
n

事件委派允许我们将单个事件侦听器附加到
父元素，该元素将为匹配
选择器，无论这些子体现在存在还是添加到
未来

您应该
bind
使用
.on（）
方法单击事件处理程序：

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

必须使用
3
参数调用方法：


事件
目标元素
触发事件后执行的回调函数
动态创建的元素的事件处理是不同的。您可以检查一下，正如旁注一样，将单击事件绑定到
文档
会使您的就绪包装器在此处无效：）@a.Wolff，是的，在这种情况下，可以使用
$（#示例tbody）.on（）
@Alexandru IonutMihai[how-to-pass-id-value（））