如何通過單擊圖像從錨標記調用onClick函數？

Question

基於數據庫的值狀態將為Y或N 如果Y表示將active.png則會顯示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>

Answer 1

您正在使用.on方法，但不用於dynamically附加的元素。

您必須對動態添加的元素使用event delegatio 。

通過事件委托，我們可以將單個事件偵聽器附加到父元素，該元素將為與選擇器匹配的所有后代觸發，無論這些后代現在存在還是將來添加。

您應該使用.on()方法bind click事件處理程序：

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

必須使用3參數調用方法：

• 事件
• 目標元素
• 事件觸發后執行的回調函數。