CODEWITHSUNDEEP
javascriptphpjqueryhtmlhtml-lists
Jojo01
Jojo01

Reputation: 1289

Php echo jQuery click issue

I have this page with a button that is echoed in php. I also echo a jQuery script, to slideToggle an ul list element when a button is clicked. The problem here is that the jQuery javascript script is echoed at the same time when the button is echoed, and i can think of no way to delay it.

Code:

<?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);
?>

I put document.ready to the script and also moved the script at the bottom of the page, but it didn't help

Upvotes: 0

Views: 795

Answers (1)

KAD
KAD

Reputation: 11122

First thing you need to add a # to the dynamically created ul id with S in the script part in order to catch the DOM object through the Id.

Second, use jquery 'on' function which binds the event to an element at anytime this element is created, so your code shall become as follows :

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

Upvotes: 1

Related Questions