Question

问题：我有一个通过Ajax填充。在此表中创建了一些本地锚点。单击一个锚点时，它应该将隐藏的一个变为可见并自动滚动到它。所有这一切都在我手工填充（可见性+滚动）时起作用，但在通过Ajax填充时根本不起作用。

我的index.php文件中有以下结构：

<section id="section1">
   <table></table>
</section>

<section id="section2>
   (this section is hidden via CSS)
</section>

<!-- When the link "More infos" is clicked -->
<script>
    $('.moreInfos').click(function() {
        if ($('#section2').is(':hidden')) {
            $('#section2').slideDown('slow');
        }
    });
</script>

<!-- Ajax call -->
<script language="JavaScript">

        function createInstance()
        {
            var req = null;
            if (window.XMLHttpRequest)
            {
                req = new XMLHttpRequest();
            } 
            else if (window.ActiveXObject) 
            {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e)
                {
                    try {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) 
                    {
                        alert("XHR not created");
                    }
                }
                }
            return req;
        };

        function storing(data)
        {
            var element = document.getElementById('banques');
            element.innerHTML = data;
        }

        function submitForm()
        { 
            var req =  createInstance();
            var montant = document.getElementById("montant").value;
            var mois = document.getElementById("selectMois").value;
            var taux = '<?php echo $taux; ?>' ;
            var data = "taux=" + taux +  "&montant=" + montant+  "&mois=" + mois+"&tag=" + 1;

            req.onreadystatechange = function()
            { 
                if(req.readyState == 4)
                {
                    if(req.status == 200)
                    {
                        storing(req.responseText);  
                    }   
                    else    
                    {
                        alert("Error: returned status code " + req.status + " " + req.statusText);
                    }   
                } 
            }; 

            req.open("POST", "fonction/table.php", true); 
            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            req.send(data); 
        } 

</script>

＆＃34;模拟＆＃34;链接调用ajax中的php文件，它将加载表。这是在Ajax中调用的php文件：

<?php
    include('BDD.php');
    echo'   <tr>
                <th></th>
                <th>Banque</th>
                <th>Taux</th>
                <th>Frais</th>
                <th>Mensualité</th>
                <th>Plus d\'infos</th>
            </tr>';
    $tag=1;
    $sql="select * from banque where BAN_change=0 and BAN_tag=".$_POST['tag']." ORDER BY BAN_Ordre";
    $select=$bdd->query($sql);
    $result=$select->fetchAll();

    $nb=count($result);
    if ($nb!=0){
        foreach($result as $value){
            $taux=$_POST['taux']+$value['BAN_Taux_Credit'];
            $mensu=$_POST['montant']/$_POST['mois'];
            $mensu+=$mensu*$taux/100;

            echo'<tr>';
                echo'<td><img width="50" height="20" src="img/'.$value['BAN_Id'].'/img.jpg" /></td>';
                echo'<td>'.$value['BAN_Nom'].'</td>';
                echo'<td>'.$taux.'</td>';
                echo'<td>'.$value['BAN_Frais'].'</td>';
                echo'<td>'.$mensu.'</td>';
                echo('<td><a href="#section2" class="moreInfos">More infos</a></td>');
            echo'</tr>';
        }
    }
?>

摘要：当用户点击＆＃34;更多信息＆＃34;时，应该出现＃section2并且浏览器窗口滚动到它。现在，当我手工填写时，这是完美的。然后显示＃section2，浏览器正在滚动到＃section2。当我通过Ajax进行操作时，锚点不再起作用了。

由于

Answer 1

因为当您添加新事件时，事件不会神奇地附加

$('.moreInfos').click(function() {
    if ($('#section2').is(':hidden')) {
        $('#section2').slideDown('slow');
    }
});

您的代码需要使用事件委派

$(document).on("click", '.moreInfos', function() {
    if ($('#section2').is(':hidden')) {
        $('#section2').slideDown('slow');
    }
});

Answer 2

这可能是由于HTML没有加载到DOM中。请尝试使用：

$(document).on('click', '.selector',  function() {
      alert("Working");
    });

＆＃34;事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。＆＃34;

如果这样有效，那么你可以在之后进行微调。

此致

ajax中生成的锚链接无法正常工作

2 个答案: