Question

我有一个程序，在其中生成一个文件夹，其子文件夹和文件，并且当我单击该文件时，它必须显示其内容。我的问题是，当我单击时，没有调用该函数。

这是我的功能：

     function printFile(params) {
            //alert("Hello");
            $.ajax({
                    method: "GET",
                    url: "getFile.php",
                    data: {
                        q: params
                    }
                })
                .done(function(msg) {
                    $("#continut").html(msg);
                });

    }

    window.onload = function(){
        //alert("Hello");
        $("li").click(function() {

            printFile(this.id);
        });

    };

这是身体：

<?php
    function listAll($path, $test) {

        $fileList = glob($path);

        //Loop through the array that glob returned.
        foreach($fileList as $filename){
        $pieces = explode("/", $filename);
        if($test == 0){
        if (strpos(end($pieces), '.') !== false) {
        echo '<li class="file">'.end($pieces)."</li>", '<br>'; 
        }
        else
        echo '<ul class="folder">'.end($pieces).'</ul>', '<br>'; 
        }
        else
        {
        $spaceValue = 40*$test;
        echo '<ul class="spaceDiv" style="margin-left: '.$spaceValue.'px;">';
        if (strpos(end($pieces), '.') !== false) {
        echo '<li class="file" id="'.$filename.'" value="test">'.end($pieces)."</li>", '<br>'; 
        //echo $path;
        }
        else
        echo '<ul class="folder">'.end($pieces).'</ul>', '<br>'; 
        echo '</ul>';
        }
        listAll($path.end($pieces)."/*", $test+1);
        }
    }

    listAll("D:/xampp/htdocs/*", 0);



?>

这是getFile.php：

<?php 

    $val = $_GET['q'];

    $fh = fopen($val,'r');
    while ($line = fgets($fh)) {
        echo($line."<br>");
    }
    fclose($fh);


?>

如何在生成的li上调用函数printFile？

Answer 1

您的问题是，单击处理程序在页面加载时运行一次，大概在文档中没有任何li之前，您需要使用.on来委派处理程序。

$(document.body).on('click', 'li', function() {
   printFile(this.id);
});

我做了一个有用的小提琴： https://jsfiddle.net/4we3ht67/2/

这是其中的代码：

HTML：

<div id="files"></div>

Javascript：

$(function() {
    function getFiles() {
    $("#files").html("<ul><li id=\"file-1\">File 1</li><li id=\"file-1\">File 2</li></ul>");
  }

  function printFile() {
    alert('File clicked!');
  }

  $(document).on('click', 'li', function() {
   printFile(this.id);
    });

  setTimeout(getFiles, 1000);
})

单击时未调用功能

1 个答案: