如何通过点击图像从锚标记调用onClick函数?

时间:2017-12-12 10:46:25

标签: javascript jquery html

根据数据库值状态将为YN。如果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>

点击活动:

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

1 个答案:

答案 0 :(得分:2)

您正在使用.on方法,但不会使用dynamically附加元素。

对于已添加动态的元素,您必须使用event delegatio n。

  

事件委托允许我们将单个事件监听器附加到   父元素,将为匹配a的所有后代触发   选择器,无论这些后代现在存在还是被添加到   将来

您应bind使用.on()方法点击事件处理程序:

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

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

  • 事件
  • 目标元素
  • 触发事件后执行回调功能。