Question

我需要解释的是什么。我有一个滑块，所有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无效

请指导我做错的事情，或者这是可能的。

Answer 1

浏览器完成呈现页面后，将执行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);                      
}

通过ajax将标签加载到主页面

1 个答案: