我需要解释的是什么。 我有一个滑块,所有li包含产品图像,所以我必须在选项卡中显示相关的产品图像。(即第一个图像有3个相关的产品图像,而不是我必须显示三个选项卡,每个选项卡包含图像)
这是从滑块获取当前li产品ID和此ID由 get_product.php 页面中的ajax完成的,并从数据库中获取相关产品并显示在标签中并加载到主页面返回
<div id='tabproduct'></div>
我的代码是,当前的产品ID是&#34; 5&#34;所以
function getId(ID5) {
var strURL="get_product.php?proid="+ID5;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById('tabproduct').innerHTML=req.responseText;
//alert(req.responseText);
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
在ajax页面get_product.php中使用php logic final html就像这样
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1"> product 1</a></li>
<li><a href="#tab2">product 2</a></li>
<li><a href="#tab3">product 3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>image 1</p>
</div>
<div id="tab2" class="tab">
<p>image 2</p>
</div>
<div id="tab3" class="tab">
<p>image 3</p>
</div>
</div>
和jscript就像
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>
如果调用此标签html 而没有ajax工作正常,但是当通过ajax 标签html 时,jquery无效
请指导我做错的事情,或者这是可能的。
答案 0 :(得分:0)
浏览器完成呈现页面后,将执行jQuery(document).ready(function(){...})
内的代码。请注意,如果您之后通过AJAX加载内容,则不会再次触发。
解决问题的一种方法是在手动执行ajax操作后附加事件处理程序:
jQuery('#tabproduct .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
});
将代码插入DOM(放置警报的位置)后放置:
if (req.status == 200) {
document.getElementById('tabproduct').innerHTML=req.responseText;
//alert(req.responseText);
}