Question

我遇到了jQuery的问题，因为当我从ajax调用收到html响应并将其添加到div时，收到的html中的div不会从我的外部javascript文件中调用另一个函数。

在我的index.php页面中，我引用了一个外部javascript文件：

<script src="functions/functions.js" type="text/javascript"></script>

以上脚本包含以下内容：

jQuery(document).ready(function()
{
    $(".active").on('click', function()
    {
        jQuery.get('../ajax/file.php', function(data) {
        jQuery('#container').prepend(data);
        });
    })

    jQuery("#mydiv").on('click', function(event)
    {
        alert('clicked');
    });
});

当点击一个类为'active'的div时，会调用file.php - 它所做的就是输出id为'mydiv'的div

<div id="mydiv"></div>

现在，当我点击“mydiv”div时，它不会从functions.js文件中调用该函数。我已经将ajax调用之外的上面的div直接移动到index.php文件中，该文件执行函数正常，但正如我所说，如果它是通过ajax调用生成并附加的，它不想工作。

有什么想法吗？

Answer 1

使用#mydiv过滤器将文档上的click事件绑定，以便在包含带有id mydiv添加事件的元素的html动态附加时。

jQuery(document).on('click', "#mydiv", function(event)
{
    alert('clicked');
});

或者如果将响应添加到'#container'，那么您可以将事件绑定到'#container'，

jQuery('#container').on('click', "#mydiv", function(event)
{
    alert('clicked');
});

HTML ajax响应没有执行javascript函数

1 个答案: