制作jQuery的。对功能的工作与AJAX加载的内容 [英] Making jquery .on function work with AJAX loaded content
问题描述
我有麻烦了。对点击功能工作在AJAX加载的内容。
I am having trouble getting an .on 'click' function to work upon AJAX loaded content.
我曾与jQuery的.live之前，但是这是第一次用。对，了解它的工作原理，在完全相同的方式，使不确定为什么我有问题。
I have worked with the jquery .live before but this is the first time with .on and understand it works in the exact same way so unsure why I am having problems.
下面是HTML，给到你点击元素
Below is the HTML that gives the element to which you click on
<h1>Press & 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内容的功能。
Below is the function that loads the AJAX content.
$("#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
This should load the following 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>
现在上面的code根本不会执行，在Firebug显示任何错误，诸如此类。
Now the above code simply wont execute, show any errors etcetera in firebug.
所以我有点失落，为什么它不会执行，警报（），即使不执行。
So I'm a bit lost as to why it wont execute, the alert() even does not execute.
推荐答案
首先要确保你击中目标，试试这个，看看警报显示：
First make sure you're hitting the target, try this and see if the alert shows :
$(function() {
$(document).on('click', '#news', function() {
alert('ok');
});
});
如果单击#news元素时，警报显示，它的确定。
If the alert shows when clicking the #news element, it's ok.
现在这一行：
$.get("http://<? echo ROOT; ?>includes/functions.php",
您使用的是简写PHP开放，并且需要被打开，你可以试试
You are using the shorthand PHP opening, and that needs to be turned on, you could try
<?php echo ROOT; ?>
但在弗兰克•是ROOT，从来没有看到过，没找到在根目录下的PHP手册任何东西，所以我想我自己的服务器，PHP的最新版本，并得到了一个错误的根呢不存在，而是认为这是一个字符串，然后echo'edROOT，让您的链接看起来像：
But what the frack is ROOT, never seen that before, and could not find anything in the PHP manual on ROOT, so I tried on my own server with the newest version of PHP, and got an error as 'ROOT' does not exist, instead it assumed it was a string and just echo'ed "ROOT", so your link would look like:
$.get("http://ROOTincludes/functions.php",
这是你定义的地方自己一个变量，它应该以dollarsign，如果它是你与定义的东西定义（），确保它的设置正确，如果是使用类似 $ _ SERVER ['DOCUMENT_ROOT']; 这不是总有一些事情你可以在JavaScript中访问，因为它通常是一个文件夹，高于你的根目录，并可以在客户方，但仅在服务器端不能访问。
It it's a variable you have defined somewhere yourself, it should start with a dollarsign, if it's something you've defined with define(), make sure it's set up correctly and if it's using something like $_SERVER['DOCUMENT_ROOT']; that's not always something you can access in javascript as it will normally be a folder that is higher then your webroot, and can't be accessed on the clientside but only on the serverside.
此外，你已经写好了，开始与 HTTP方式：// 应该是一个域名。
试着在你浏览器中打开查看源代码，并找到自己的AJAX功能，看看ROOT实际输出，作为最终的输出中会在源代码中可见的，如果它使用定义（）设置一个包含的配置文件等，你可以看到它正确设置了。
Also, the way you have written it, starting with http:// it should be a domain name.
Try opening view source in you browser and find your ajax function and see what ROOT actually outputs, as the final ouput will be visible in the source, and if it's set using define() in an included config file etc. you can see that it was set up correctly.
您的JavaScript也必须在里面的PHP文件的PHP执行，否则你将不得不修改服务器的配置运行JS文件，通过PHP。
Your javascript would also have to be inside a PHP file for PHP to execute, or you would have to modify your server setup to run JS files thru PHP.
在我看来，只使用一个路径和文件名是正确的方式做到这一点，试试这个，注意控制台（F12）：
In my opinion just using a path and filename is the right way to do it, try this and pay attention to the console (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);
});
});
});
这篇关于制作jQuery的。对功能的工作与AJAX加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
