我有一个链接myLink,它应该会将Ajax加载的内容插入到我的HTML页面的div(AppenddedContainer)中.问题是,我用jQuery绑定的click事件没有在插入到appenddedContainer中的新加载内容上执行.click事件绑定在没有加载Ajax函数的DOM元素上.

我必须改变什么,才能使事件受到约束?

My HTML:

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

My JavaScript:

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

The content to be loaded:

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

推荐答案

对动态创建的元素使用事件委派:

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

这确实有效,下面是一个示例,其中我使用类.mylink(而不是data-100)附加了一个锚点

Html相关问答推荐

restrict. form—text width to input s width'

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

将网格包装在css中

如何让QML`Text`元素内的链接在悬停时显示鼠标指针?

react :事件和转发器在特定代码段中不起作用

这<;td&>如何溢出<;表>;?

如何使用CSS创建文件夹选项卡的形状?

try 更新我的Node.js应用程序中的用户,但我收到错误.然而,当我使用postman 时,更新工作正常

如何在小屏幕中制作水平滚动div

如何使活动选项卡背景作为父背景图像

在 WooCommerce 存档产品类别描述上添加阅读更多/阅读更少按钮

如何使用多边形制作如图所示的背景

MUI 日期 Select 器要包含的日期

添加带有悬停动画的喜欢图标

如何使容器的大小适合其 position:absolute; 子元素的大小

如何垂直对齐列表中的图像和文本?

具有 css 高度的输入元素:100% 溢出父 div

提交前的验证表单未显示任何验证消息?

根据百分比用多种 colored颜色 填充SVG路径

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条?