使jquery .on函数与AJAX加载的内容一起工作

Question

我无法获得.on'click'函数来处理加载AJAX的内容.

我曾经使用过jquery .live,但这是第一次使用.on并且理解它的工作方式完全相同,所以不确定我遇到问题的原因.

下面是HTML,它给出了您单击的元素

    <h1>Press &amp; Media</h1>
    <div id="back"></div>
    <div id="overlay-content">
        <span id="edocs" class="tab"></span>
        <span id="news" class="tab"></span>
        <span id="partners" class="tab"></span>
    </div>

下面是加载AJAX内容的函数.

    $("#overlay-content").on('click','#news',function() {
        var active = 1;
        $("#loading").show();
        $("#overlay-content").fadeOut(1000, function() {
            $.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) {
                $("#loading").hide(400);
                $("#overlay-content").empty().append(data).fadeIn(1000);
            });
        });
    });

这应该加载以下HTML

    <div id="news-left-panel">
        <h4>News Section</h4>
        <ul>
            <li id="newsID2" class="newsYear">
                <p>2012</p>
                <ul class="newsMonths" style="display:none">
                    <li>Jan
                        <ul class="newsArticles" style="display:none">
                            <li onClick="newsID(2)">test</li>
                        </ul>
                    </li>
                    <li>Feb</li>
                    <li>Mar</li>
                </ul>
            </li>
            <li id="newsID1" class="newsYear">
                <p>2011</p>
                <ul class="newsMonths" style="display:none">
                    <li>Dec
                        <ul class="newsArticles" style="display:none">
                            <li onClick="newsID(1)">Test</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

现在上面的代码根本不会执行,在firebug中显示任何错误等.

所以我有点迷失为什么它不会执行,alert()甚至不执行.

Answer 1

首先确保你正在击中目标,试试这个并查看警报是否显示:

$(function() {
    $(document).on('click', '#news', function() {
       alert('ok');
    });
});

如果在单击#news元素时显示警报,则表示没问题.

现在到这一行:

$.get("http://<? echo ROOT; ?>includes/functions.php",

您正在使用速记PHP开放,需要打开,您可以尝试

<?php echo ROOT; ?>

但是什么是ROOT,之前从未见过,并且在ROOT的PHP手册中找不到任何内容,所以我在自己的服务器上尝试使用最新版本的PHP,并且由于"ROOT"不存在而出现错误,相反,它假设它是一个字符串,只是echo'ed"ROOT",所以你的链接看起来像:

$.get("http://ROOTincludes/functions.php",

它是你自己定义的一个变量,它应该以一个美元符号开头,如果它是你定义的东西define(),确保它设置正确,如果它使用的东西$_SERVER['DOCUMENT_ROOT'];并不总是你可以在javascript中访问的东西,因为它会通常是一个比webroot高的文件夹,不能在客户端访问,而只能在服务器端访问.

此外,您编写它的方式,从http://它开始应该是一个域名.尝试在您的浏览器中打开视图源并找到您的ajax函数并查看ROOT实际输出的内容,因为最终输出将在源中可见,如果使用包含的配置文件中的define()进行设置等,您可以看到它设置正确.

你的javascript也必须在PHP文件中供PHP执行,否则你必须修改你的服务器设置才能通过PHP运行JS文件.

在我看来,只使用路径和文件名是正确的方法,尝试这个并注意控制台(F12):

$(document).on('click','#news',function() {
    var active = 1;
    var XHR = $.ajax({
                   type: 'GET',
                   url : '/actualpath/includes/functions.php',
                   data: { pressmediaNews: active }
              }).done(function(data) {
                   console.log(data);
              }).fail(function(e1, e2, e3) {
                   console.log('error : '+e1+' - '+e2+' - '+e3);
              });
    $("#loading").show();
    $("#overlay-content").fadeOut(1000, function() {
        XHR.done(function(data) {
            $("#overlay-content").empty().append(data).fadeIn(1000);
            $("#loading").hide(400);
        });
    });
});

Answer 2

使用代表:

$('#overlay-content').on('click', '#newsID2', function() { });

这将绑定事件#overlay-content并检查起泡事件(如果它们来自)#newsID2.

作为旁注:你的事件处理程序中有一个拼写错误(chikdren应该是children),你应该真的摆脱这个丑陋的onClick内联事件.

Answer 3

应该更像：

$("#overlay-content").on('click', '#newsID2', function() {
    ....
});

或者换句话说：

$('.wrapper').on('event', '.target', function() {
    ...
});

哪里.wrapper是已经存在的元素（或文档），以及.target要在其上运行事件的包装器内的元素。

该live函数基本上等同于：

$(document).on('event', '.target', function() { 
    ... 
});