javascript - php echo jQuery点击问题

Question

我的这个页面有一个在 php.ini 中回显的按钮。我还回显了 jQuery 脚本，以便在单击按钮时滑动切换 ul 列表元素。这里的问题是 jQuery javascript 脚本在按钮回显的同时也回显，我想不出有什么办法可以延迟它。

代码:

<?php
include_once('../php/connDb.php');
mysqli_set_charset($connect, 'utf8');
$query = mysqli_query($connect, "SELECT * FROM pages WHERE page_id = '".$page_id."'");
while($row = mysqli_fetch_assoc($query))
{
    echo '<h3>'.$row['text'].'</h3>';
}
$query = mysqli_query($connect, "SELECT * FROM menu");
echo '<div id="menuArea">';
while($row = mysqli_fetch_assoc($query))
{
    $menuName = $row['menuName'];
    $menuElements = $row['menuElements'];
    $menuElements = explode(", ", $menuElements);
    echo '
    <button id="'.$menuName.'"><h3 id="'.$menuName.'h3">'.$menuName.' &#X25BE;</h3></button>
        <ul id="'.$menuName.'S" class="menuCollapseSecond">
    ';
    foreach($menuElements as $menuElement)
    {
        echo '<li>'.$menuElement.'</li>';
    }
    echo '</ul>';
}
echo '</div>';
?>
</div>
<img id="sacImg" src="../images/sac.png">
<p>Copyright © Le Kerouac 2015</p>
</div>
<?php
$query = mysqli_query($connect, "SELECT * FROM menu");
while($row = mysqli_fetch_assoc($query))
{
    echo '
    <script type="text/javascript">
    $(document).ready(function() 
    {
        $("#'.$menuName.'").click(function()
        {
            $("'.$menuName.'S").slideToggle();
        });
    });
    </script>
    ';
}
mysqli_close($connect);
?>

我将 document.ready 放入脚本中，并将脚本移动到页面底部，但没有帮助

Answer 1

首先，您需要在脚本部分中使用 S 向动态创建的 ul id 添加#，以便通过 Id 捕获 DOM 对象。

其次，使用 jquery 'on' 函数，该函数在创建元素时将事件绑定(bind)到该元素，因此您的代码应如下所示:

...
while($row = mysqli_fetch_assoc($query))
{
    echo '
    <script type="text/javascript">
    $(document).ready(function() 
    {
        $("#'.$menuName.'").on( "click", function() {
        {
            $("#'.$menuName.'S").slideToggle(); // adding # to catch element by Id
        });
    });
    </script>
    ';
}
....