Question

所以我有一些从PHP生成的html元素，因为大多数内容是从数据库中提取的

即

<?php
    ...
    while($row = $sqlQry->fetch_object()) {
        echo "<li class = 'lstOption' id = 'opt$row->name' data-value = '$row->total_count'>
                  <h3>$row->given_reference<h3>
              </li>";
    }
    ...
?>

这是一个基于我的javascript

的示例结构

<script>
    $("ul li").click(function(){
        alert($(this).data('value'));
    });
</script>

但是如果我在回声中注入onClick=属性。脚本执行得当。我需要的是脚本使用php中的echo-ed html元素。

Answer 1

尝试使用变量插值语法，即将变量包裹在花括号

周围

＆＃34; {$变种}＆＃34; 请注意，您必须使用双引号（＆＃34;＆＃34; ）

"<li class = 'lstOption' id = 'opt{$row->name}' data-value = '{$row->total_count}'>
              <h3>{$row->given_reference}<h3>
          </li>"

Answer 2

您应该尝试使用$（document）.ready（）方法进行代码绑定。这是因为一旦你的所有DOM元素都准备就绪，那么在代码绑定文档就绪之后就会出现。以下代码也是如此。

<?php
    ...
    while($row = $sqlQry->fetch_object()) { ?>
        <li class = 'lstOption' id = 'opt<?php echo $row->name?>' data-value = '<?php echo $row->total_count?>'>
                  <h3><?php $row->given_reference?><h3>
              </li>";
    }
<?php    ...
?>


<script>
$(document).ready(function(){
 $("ul li").click(function(){
        alert($(this).data('value'));
    });
});
</script>

或写如下

<script>
    $(document).ready(function(){
     $("ul li").on("click",function(){
            alert($(this).data('value'));
        });
    });
    </script>

Answer 3

将您的脚本放入文档中，如下所示。这将解决问题

 $(document).ready(function(){
   $("ul li").click(function(){
      alert($(this).data('value'));
   });
 });

Answer 4

您可以尝试按id选择并使用on（）方法：

$(document).on('click', '[id^="opt"]', function () {});

仅当您没有其他ID为“opt”的内容时才有效。在我看来，id选择器总是强于任何其他选择器。 on（）方法也是可取的，因为它对动态生成的元素也有效（例如，在通过ajax添加内容的情况下）

此外，如果您想打印实际值而不是数据值中的公式，那么您的报价是错误的，这是正确的版本：

while($row = $sqlQry->fetch_object()) {
    echo "<li class = 'lstOption' id = 'opt".$row->name."' data-value = '".$row->total_count."'>
              <h3>".$row->given_reference."<h3>
          </li>";
}

Answer 5

尝试

$(document).ready(function(){
   $("ul li").on('click', function(){
      console.log($(this).data('value'));
   });
 });

由于您的html元素是动态生成的，因此您必须使用on()

来自PHP的echo-ed HTML元素未在JAVASCRIPT中读取

5 个答案: