如何将jQuery live()转为on()？ASP.NET弹窗失效问题求助

你的弹窗失效并直接跳转的核心原因是选择器匹配错误，加上原代码里的元素类型与选择器不匹配的问题，导致事件没有被正确捕获，默认跳转行为未被阻止。

问题点拆解 #

1. 元素与选择器不匹配：
   • 原JS使用a#popup1选择器，但你的HTML里是<span class="popup1">，span标签没有href属性，且选择器用了id（#popup1）但HTML里是class（.popup1），原代码本身就存在逻辑矛盾。
   • 修改后的JS用了#popup选择器，但HTML里根本没有这个id的元素，事件完全无法触发，点击后直接执行a标签的默认跳转（推测你实际HTML里应该是a标签，否则原代码也无法获取href）。
2. 事件委托的目标选择器错误：Repeater动态生成的元素必须用class选择器（不能用id，因为id会重复），且要与HTML里的class对应。

修正后的代码 #

1. 修正ASPX页面的HTML（确保可点击元素是a标签）

将原来的span改为a标签，保留popup1类并添加href属性：

<td>
    <a class="popup1" href="YourTargetPage.aspx?receiveDate=<%# Eval("ReceiveDate") %>" style="color:red">
        <%# string.Format(" {0:dd/MM/yyyy}", Eval("ReceiveDate")) %>
    </a>
</td>

2. 修正JavaScript代码（使用正确的事件委托）

// 委托到静态父元素.box-body，目标选择器匹配a.popup1
$('.box-body').on('click', 'a.popup1', function (e) {
    // 先阻止默认跳转，放在开头避免执行顺序问题
    e.preventDefault();

    var page = $(this).attr("href");
    var $dialog = $('<div></div>')
        .html('<iframe style="border: 0px;" src="' + page + '" width="100%" height="100%"></iframe>')
        .dialog({
            autoOpen: false,
            modal: true,
            height: 480,
            width: 320,
            title: "Add Appointment Details",
            buttons: {
                "Close": function () {
                    $dialog.dialog('close');
                    parent.location.href = parent.location.href;
                }
            },
            close: function (event, ui) {
                parent.location.href = parent.location.href;
            }
        });
    $dialog.dialog('open');
});

关键说明 #

• 用a.popup1作为目标选择器：匹配所有动态生成的带popup1类的a标签，避免id重复问题。
• 提前调用e.preventDefault()：确保在弹窗逻辑执行前就阻止默认跳转，防止因代码执行顺序导致的跳转。
• 委托到静态父元素：.box-body是页面加载时就存在的静态元素，能正确捕获动态生成元素的点击事件。

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