嵌套链接方案下同class锚点链接仅首个可点击跳转问题求助

根因 #

你当前使用的是直接绑定事件的写法，只有iframe首次加载完成时已经存在的a.anchorLink元素能绑定上点击事件。当AJAX请求成功后，你替换了iframe内的全部HTML内容，新插入的a.anchorLink元素没有绑定任何点击事件，因此点击后无任何响应。

修复方法 #

修改前端JS的事件绑定逻辑，改用事件委托模式，将点击事件绑定在iframe的文档根节点上，后续所有动态插入的a.anchorLink元素都能触发该事件：

$('#frmDisplay').on('load', function () {
    // 事件委托到iframe的文档对象上，适配动态插入的元素
    $(this).contents().find('document').on('click', 'a.anchorLink', function () {
        var id = $(this).attr('id');
        var hid = document.getElementById('<%= HiddenField1.ClientID %>');
        hid.value = id;
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Amm.aspx/getlink",
            // 改用JSON.stringify生成请求参数，避免手动拼接JSON的语法错误
            data: JSON.stringify({ Id: id }),
            dataType: "json",
            success: function (data) {
                $('#frmDisplay').contents().find('html').html(data.d);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });
});

其他代码优化建议 #

• 后端代码存在SQL注入风险，直接将Id参数拼接进SQL语句的写法极易被攻击，建议改用参数化查询。
• 后端用到的SqlConnection、SqlDataReader、StreamWriter等资源都没有做释放处理，建议全部用using块包裹，自动释放资源避免内存泄漏。
• 后端代码中StringWriter和HtmlTextWriter的逻辑是冗余的，你写入文件的sw.ToString()实际是空值，建议直接将解码得到的html字符串写入文件即可。

内容的提问来源于stack exchange，提问作者suhaas