HTML onclick函数不通过PHP echo调用

Question

Originally I had the following to produce a menu using PHP:

<ul>
   <?php 
         $items = mysqli_query($con, "SELECT DISTINCT item FROM table");
         while ($row = mysqli_fetch_array($items)) { ?>
             <li><a href='#' onclick='myFunction(<?php echo $row['item'] ?>)'><?php echo $row['item'] ?></a></li><? php 
         } ?>
</ul>

I had this code inside an index.php page surrounded by html. The is to produce a menu from items in a database. In this form it worked fine and called 'myFunction(string)' which is in a seperate global.js file.

function myFunction(string) {
$('#container').load('php/getContent.php', {string: string});
}

getContent.php is similar to the php above. except it uses a where clause in the query which it extracts from the string.

---

So my problem arose when I went to clean up the code which produces the menu. I added the following function to global.js

$(document).ready(function() {
    $('#menu').load('php/getMenu.php');
});

getMenu.php looks like this:

$items = mysqli_query($con, "SELECT DISTINCT item FROM table");

echo "<ul class='tab'>";
while ($row = mysqli_fetch_array($items) {
    echo "<li><a href='#' onclick='myFunction(".$row['item'].")'>".$row['item']."</a></li>";
}
echo "</ul>"

This works correctly in producing the menu items as before except the onclick function no longer works. Placing an anonymous inline onclick function did work however so I figured it may be the $(document.ready() inside the global.js file causing issues. I moved the $(document).ready() back into index.php in a script tag to check, still not working.

I originally had the script tags as the last elements in the body so I moved them up into the header to check if that changed anything but that also didn't work.

the header tag looks as follows:

<script src='scripts/jquery-3.0.0.js'></script>
<script src='scripts/global.js'></script>
<script>
     $(document).ready(function() {
         $('#menu').load('php/getMenu.php');
     });
</script>

all my php files are in a subfolder called php and all my js files in a subfolder called scripts.

---

So firslty, does it matter if I have the $(document).ready() in a js file with other functions, does that mess with the other functions?

Secondly any idea on why the function is no longer being called?

Thanks in Advance.

Answer 1

This is a problem I had too. When you generate elements after the DOM fully loads the onclick wont work anymore. In my case I used:

$('parent of element which is in DOM').delegate('element', 'event', function(){
});

And worked.

Take a look at jQuery API http://api.jquery.com/delegate/

In your case your php should be like:

$items = mysqli_query($con, "SELECT DISTINCT item FROM table");

echo "<ul class='tab'>";
while ($row = mysqli_fetch_array($items) {
    echo '<li><a href="#">'.$row['item'].'<input class="sql_input" hidden="hidden" value="'.$row['item'].'"></a></li>';
}
echo '</ul>';

And your Javascript:

function load_file(value){
   $('#container').load('php/getContent.php', {string: value});
}

$('parent of .tab').delegate('.tab li a', 'click', function(){
   var get_value = $(this).find('.sql_input').val();
   load_file(get_value);  
});