24

我无法让 .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>

现在上面的代码根本不会执行，在萤火虫中显示任何错误等等。

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

4

7 回答 7

41

首先确保你击中了目标，试试这个，看看警报是否显示：

$(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'不存在，相反，它假设它是一个字符串，只是回显“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);
        });
    });
});
于 2012-05-17T13:05:51.477 回答
10

使用委托：

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

这将绑定事件#overlay-content并检查冒泡事件是否源自#newsID2.

作为旁注：您的事件处理程序中有一个错字（chikdren应该是children），您应该真正摆脱这个丑陋的onClick内联事件。

于 2012-05-02T15:21:15.717 回答
5

应该更像：

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

或者换句话说：

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

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

该live功能基本上相当于：

$(document).on('event', '.target', function() { 
    ... 
});
于 2012-05-02T15:21:12.517 回答
3

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

关键句

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

要处理这种情况，请尝试使用选择器参数绑定到文档对象：

$(document).on('click','#news',function() {...}
于 2012-05-10T18:09:56.440 回答
0

新闻左面板

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);

                }
            });
        });​
于 2012-05-16T05:33:02.703 回答
0

既然您说您以前使用过 .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

            });
        });
    });
于 2012-05-15T16:03:55.807 回答
0

你确定你的 Ajax 调用是正确的/返回正确的 HTML 吗？

我在这里用 setTimeout() 替换了 $.get() （并简化了一点）：http: //jsfiddle.net/q23st/

它似乎有效，所以我怀疑您的 $.get() 没有返回预期返回的内容。

于 2012-05-16T11:49:27.973 回答