1

我在使用 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');
    });
});

当单击具有“活动”类的 div 时,将调用 file.php - 它所做的只是输出 id 为“mydiv”的 div

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

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

4

1 回答 1

6

使用 #mydiv 过滤器绑定文档上的单击事件,以便当包含 id 为 mydiv 的元素的 html 时动态附加事件。

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

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

jQuery('#container').on('click', "#mydiv", function(event)
{
    alert('clicked');
});
于 2012-11-27T16:11:44.060 回答