javascript - HTML onclick 函数不通过 PHP echo 调用

Question

最初我有以下内容来使用 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>

我将这段代码放在一个被 html 包围的 index.php 页面中。这是从数据库中的项目生成菜单。在这种形式下，它工作得很好，并称为“myFunction(string)”，它位于单独的 global.js 文件中。

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

getContent.php 与上面的 php 类似。只不过它在查询中使用了从字符串中提取的 where 子句。

<小时/>

所以当我去清理生成菜单的代码时，我的问题出现了。我将以下函数添加到 global.js

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

getMenu.php 看起来像这样:

$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>"

这可以像以前一样正常生成菜单项，只是 onclick 函数不再起作用。然而，放置一个匿名内联 onclick 函数确实有效，所以我认为可能是 global.js 文件中的 $(document.ready() 导致了问题。我将 $(document).ready() 移回了 index.php 中要检查的脚本标记，仍然不起作用。

我最初将脚本标记作为正文中的最后一个元素，因此我将它们移到标题中以检查是否更改了任何内容，但这也不起作用。

标题标签如下所示:

<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>

我的所有 php 文件都位于名为 php 的子文件夹中，所有 js 文件都位于名为 script 的子文件夹中。

<小时/>

首先，如果我将 $(document).ready() 放在带有其他函数的 js 文件中，这有什么关系吗？这会与其他函数混淆吗？

其次，你知道为什么该函数不再被调用吗？

提前致谢。

Answer 1

这也是我遇到的问题。当您在 DOM 完全加载后生成元素时，onclick 将不再起作用。就我而言，我使用了:

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

并且工作了。

看看 jQuery API http://api.jquery.com/delegate/

在你的情况下，你的 php 应该是这样的:

$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>';

还有你的 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);  
});