gpt4 book ai didi

javascript - ajax 中生成的 anchor 链接不起作用

转载 作者:行者123 更新时间:2023-12-02 16:47:05 24 4
gpt4 key购买 nike

问题:我有一个通过 Ajax 填充的。该表中创建了一些本地 anchor 。当单击 anchor 时,它应该将隐藏的 anchor 变为可见并自动滚动到它。当我手动填充(可见性+滚动)时,所有这些都有效,但当通过 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>

“模拟”链接调用 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>';
}
}
?>

摘要:当用户单击“更多信息”时,#section2 应该出现,并且浏览器窗口滚动到它。现在,当我手动填充时,效果非常好。然后显示#section2,并且浏览器滚动到#section2。当我通过 Ajax 执行此操作时, anchor 不再工作。

谢谢

最佳答案

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

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

您的代码需要使用事件委托(delegate)

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

关于javascript - ajax 中生成的 anchor 链接不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27024380/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com