Question

我有一个.php，它通过ajax加载到div中。在这个.php中，我有一个<a href>链接，可以切换下一个<p>，显示/隐藏。但是，当我把jQuery代码放在.php本身时，它没有用。所以我意识到我可能不得不将jQuery代码放入接收.php中，该接口具有ajax - 用户将看到<a href>显示/隐藏<p>。但它似乎没有做任何事情。这是html：

echo "<div><a class=\"exp\" href=\"javascript:void(0)\">View explanation: </a>";
echo "<p class=\"pexp\" style=\"display:none;\">";
echo $tfeedback;
echo "</p></div>";

jquery的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
$('.exp').on('click', function (e) {
    e.preventDefault(); // stop href()
    $(this).next().toggle();      
});
    });
</script>

$ tfeedback是字符串 - 我已经检查以确保它不是空的。

Answer 1

Please try this code hope it helps you......

$(document).delegate('.exp','click', function (e) {
    e.preventDefault(); // stop href()
   if($(this).next().css('display')=='block'){
    $(this).next().hide();
}else{
    $(this).next().show();
     }   
});

OR

$(document).on('click', '.exp', function (e) {
    e.preventDefault(); // stop href()
    if($(this).next().css('display')=='block'){
    $(this).next().hide();
}else{
    $(this).next().show();
     }      
});

Answer 2

在通过AJAX加载锚点和段落之前，您可能正在执行第二个代码段中的代码。在此阶段，没有与.exp匹配的元素，因此集合$('.exp')为空。

解决方案是委托已经存在的祖先：

$(document).on('click', '.exp', function (e) {
    e.preventDefault(); // stop href()
    $(this).next().toggle();      
});

使用jquery切换通过ajax加载的元素

2 个答案: