Question

我有一个基本的HTML文件，用作包装器。在这个文件中，我有点喜欢这个：

<div class="myBtn">Click me</div>
<div class="myContainer"></div>

单击按钮后，我想从给定的HTML资源加载内容：

function showContent() {
    $.ajax({
        url: "mySnippet.html",
        data: {},
        success: function (data) {
            $('.myContainer').append(data);
            $('.myContainer').fadeIn();
        },
        dataType: 'html'
    })
}

现在主要问题：内容网站如下所示：

<div class="panel-heading">
    My headline
    <button type="button" class="close"
            data-target="copyright-wrap"
            data-dismiss="panel">
        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>
</div>

例如，按钮链接如下：

$(window).load(function () {
    $('.close').click(function() {
       console.log('should trigger, but it does not');
    }
});

当我尝试在关闭按钮上处理点击事件时，它根本不起作用。我尝试使用document(ready)以及window(load)。

有没有办法实现这个目标？

Answer 1

这个有很多解决方法，但我最喜欢的是使用该选择器将点击事件绑定到所有DOM元素，当前的元素和特征元素。

例如：

$(window).load(function () {
    $('body').on("click",".close",function() {
       console.log('should trigger, but it does not');
    }
});

因此，使用 .close 选择器定位的所有元素都将绑定该事件以及动态创建的未来事件，因为只有在加载页面后才会触发load事件。

Answer 2

尝试使用.ready()

中的document事件委派

$(document).ready(function () {
    $(this).on("click", ".close", function() {
       console.log('should trigger, but it does not');
    });
});

jQuery使用ajax获取HTML文件并从主站点运行JS代码

2 个答案: