Question

我的页面上有一个在php中回显的按钮。我还回显了一个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＆＃39; on＆＃39;函数在创建此元素的任何时候将事件绑定到元素，因此您的代码将变为如下：

...
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>
    ';
}
....

Php echo jQuery点击问题

1 个答案: