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()定义的东西，请确保它设置正确，如果它使用{{1}之类的东西这并不总是你可以在javascript中访问的东西，因为它通常是一个比你的webroot更高的文件夹，并且不能在客户端访问，而只能在服务器端访问。

此外，您编写它的方式，从$_SERVER['DOCUMENT_ROOT'];开始，它应该是一个域名。尝试在您的浏览器中打开视图源并找到您的ajax函数并查看ROOT实际输出的内容，因为最终输出将在源中可见，如果使用包含的配置文件中的define（）进行设置等，您可以看到它设置正确。

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

在我看来，只使用路径和文件名是正确的方法，试试这个并注意控制台（F12）：

http://

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() { 
    ... 
});

Answer 4

http://bugs.jquery.com/ticket/11203

关键句

如果要将新HTML注入页面，请选择元素和将新HTML放入页面后附加事件处理程序。

要使用此方案，请尝试使用选择器参数绑定到文档对象：

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

Answer 5

既然你曾说过你曾经使用过.live（），那么问题就是你在追加它之前试图将你的点击绑定到你附加到文档的东西上吗？

当你使用live时，它会自动处理这类内容，但是当你不使用live时，在将任何事件绑定到它们之前，通常必须存在页面上的内容。如果您使用AJAX添加内容，则在使用AJAX加载它们之前，无法为这些内容设置单击事件。当你使用.live（）时，你可以提前做到这一点。

我会这样做：

$("#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);

                //put your delegate/call/function,etc here

            });
        });
    });

Answer 6

新闻左面板

year_Month_newsID 您的新闻年份，月份，新闻ID。例如 2012_5_16 ， 2012_5_17 等

<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 id="year_Month_newsID">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 id="year_Month_newsID">Test</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Jquery函数

$("#news-left-panel ul li").live("click", function(event) {
            var news=(this.id).split("_");
            var year=news[0];
            var month=news[1];
            var newsID =news[2];

            $.ajax({
                type: "POST",
                url: 'http://<? echo ROOT; ?>includes/functions.php',
                data: {
                    year: year,month:month,newsID :newsID
                },
                error: function(){
                    $('#news').html( "<p>Page Not Found!!</p>" );
                    // Here Loader animation
                },
                beforeSend: function(){
                    // Here Loader animation
                    $("#news").html('');
                },
                success: function(data) {
                    $('#news').html(data);

                }
            });
        });

Answer 7

您确定您的Ajax调用是否正确/返回正确的HTML？

我用setTimeout（）替换了$ .get（）（并简化了一下）：http://jsfiddle.net/q23st/

它似乎有效，所以我怀疑你的$ .get（）没有返回它预期返回的内容。

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

7 个答案:

新闻左面板

Jquery函数