如何防止jquery的默认行为剥离我的JS？
function callBackFunctionLoadPage(data)
{
var data = $(data).find('#content');
alert($(data).html());
$("#content").html(data);
$("#page").fadeTo(100,1);
}
function loadPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#page").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadPage);
}
在我的代码中，我想要标签，但jquery将它们剥离出来：
原始代码：
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
但是来自jquery：
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
修改
这是我正在加载的实际html页面
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kannada on campus</title>
<meta name="keywords" content="" />
<link rel="icon" href="images/icon.jpg"/>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<div id="box"><a href="http://twitter.com/bedupako" target="_blank"><img src="images/twitter.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://twitter.com/bedupako" border="0" /></a> <a href="http://www.youtube.com/user/Bedupako" target="_blank"><img src="images/youtube.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.youtube.com/user/Bedupako" border="0" /></a> <a href="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" target="_blank"><img src="images/Facebook Product Profile.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" border="0" /></a> <a href="http://www.orkut.com/Community?cmm=98290522" target="_blank"><img src="images/orkut.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.orkut.com/Community?cmm=98290522" border="0" /></a>
<!--end box-->
</div>
<body>
<!-- start header -->
<div id="header">
<div id="search"></div>
</div>
<div id="logo">
<h1><a href="#">Kannada on campus</a></h1><br /><br />
<h2>Kannada kali, uddaraaagi. Baai muchhikondu bhashe maatadi.</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<div id="menu">
<ul>
<li><a href="?p=ho" onclick="javascript:loadPage('?p=ho',null);return false;">Home</a></li>
<li><a href="?p=e" onclick="javascript:loadPage('?p=e',null);return false;">Events</a></li>
<li><a href="?p=ph" onclick="javascript:loadPage('?p=ph',null);return false;">Photos</a></li>
<li><a href="?p=ab" onclick="javascript:loadPage('?p=ab',null);return false;">About</a></li>
<li><a href="?p=cu" onclick="javascript:loadPage('?p=cu',null);return false;">Contact Us</a></li>
<li><a href="other_files/change_lang.php?l=k&r=%2Fkoc%2F%3Fp%3Dph">ಕನ್ನಡ</a></li>
</ul>
</div> <!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2><a href="?p=ev">Register you event</a></h2>
Tell us if you are conducting any kannada event and we will update it to our audience!
</li>
<li>
<h2>Subscription</h2>
<form id="form1" method="post" action="other_files/add_mailing_list.php">
<label>
Subscribe to our mailing list:
<input type="text" name="sub-email" id="sub-email" />
<input type="submit" name="submit" id="submit" value=" Add " />
<input type="hidden" name="redirect" id="redirect" value="%2Fkoc%2F%3Fp%3Dph" />
</label>
</form>
<h2>Current Events</h2>
<ul>
</ul>
<h2>archives</h2>
<ul>
<li><a href="?p=de&id=1">test</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2011 All Rights Reserved. • Designed by <a href="http://ajitah.com/" target="_blank">Ajitah</a> | <a href="humans.txt">humans.txt</a></p>
</div>
<!-- end footer --></body>
</html>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23549810-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
答案 0 :(得分：5)
我建议你做不同的事情。首先，ajax调用很好，因为它们是轻量级的，所以而不是加载整个页面，你可以只获取更新的数据并在必要时注入它。如果您正在获得一组包含脚本的标记，那么您实际上是使用ajax来执行正常的http页面请求。这就像看着超市里的快线（10件或更少）并且看到它比你现在所站的岛屿移动得更快，所以你搬到那里。但是如果你为每个请求都这样做，你最终会把快车道变成正常车道。
从服务器获取javascript代码以执行通常表明您没有正确思考问题，因为您的混合域非常糟糕。
首先，为什么不只是在每次ajax下一页/图库时执行一个函数？为什么需要从服务器获取代码？根据我的第一点，为什么不只是获取一系列新文件名并从中构建新的库？
如果由于某种原因你觉得你想继续这种方式（我应该指出，在这一点上以这种方式执行代码不仅仅是不好的做法，但在某些情况下不安全），你可以提取代码和eval它：
假设只有一个代码块，并且它包含在<script></script>中（没有考虑到各种各样的空白和有趣的字符）：
function callBackFunctionLoadPage(data)
{
...
eval(data.match(/<script>(.*)<\/script>/im)[1]);
}
<强>更新
jquery剥离了javascript，但它仍然执行它：
$('#content').html('<div><script>alert("hello, world!");</script></div>');
因此，如果脚本标记的内容已经执行，几乎没有理由想要脚本标记...
更新2（非信徒）
var scriptDiv = $('<div><span></span><script>alert("boom!");</script></div>');
alert("not yet"); // the above is created but not executed until added to the DOM
$('body').append(scriptDiv); // there you go, proof that it is executed
alert(scriptDiv.html()); // to prove that the script was stripped
答案 1 :(得分：4)
您是否尝试过使用JS的原生innerHTML？
$("#content").get(0).innerHTML = data;
如果这有效，正如davin指出的那样，你仍然需要评估脚本：
eval(data.match(/<script>(.*)<\/script>/im)[1]);
加载和评估SCRIPT表单AJAX应该可以正常工作。