Question

我有以下jquery脚本

$("li").click(function(){
    var id = $(this).attr("id");

    $.get("getData.php", {id: id}, function(data){
        $("ul").after(data);
    });
    $(this).css("color","red");
});

和getData.php文件

<?php
          include("db_config.php");
          $ctgID = $_GET["id"];
          if(isset($ctgID))
          {
            getData($dbh, $ctgID);
          }

          function getData($dbh, $ctgID)
          {

           try{
            $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $sql = $dbh->prepare("select ctgid, ctgdescription from categories where ctgparentid = $ctgID");
            $sql->execute();
            $result = $sql->rowCount();
            if($result >0)
            {
                echo "<ul>";
                while($row = $sql->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
                {
                    echo "<li class=\"subCtg\" id=\"". $row[0] . "\">" . $row[1] . "</li>";
                }
                echo "</ul>";
            }
            else
            {
                echo "1";
            }
        }
        catch(PDOException $e){
            die($e);
        }
    }

    ?>

即使上面的内容对顶级类别有效，但当我点击创建的subCtg类时它也无法正常工作。你能帮帮我吗？

Answer 1

使用像这样的点击事件，也可以触发现有和动态列表：

$('ul').on('click', 'ul li', function(){
    .....
});

看看这个例子

HTML：

<ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JS：

$(document).on('click', 'li', function(e){
    e.preventDefault();
    e.stopPropagation();

    $(this).parent('ul').after('<ul><li>new item click here </li></ul>');
});

现场演示：http://jsfiddle.net/jogesh_pi/YdByT/

Answer 2

使用Jquery Bind代替click事件..

$( ".subCtg" ).bind( "click", function() {
  alert( "User clicked " );
});

Jquery Bind

Answer 3

当你加载新的ul / li元素时，你必须绑定＆＃34;点击＆＃34; 对他们的事件。

试试这个：

PHP

...
while($row = $sql->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
    {
        echo "<li class=\"subCtg\" onclick=\"myFunc(".$row[0].");\" id=\"". $row[0] . "\">" . $row[1] . "</li>";
    }
...

的Javascript

$("li").click(function(){
    var id = $(this).attr("id");
    myfunc(id);
});

function myFunc(id){
    $.get("getData.php", {id: id}, function(data){
        $("#"+id).parent(ul).after(data);
    });
    $("#"+id).css("color","red");
}

唯一的JavaScript方法可能是：

function myFunc(id){
    $.get("getData.php", {id: id}, function(data){
        $("#"+id).parent(ul).after(data);
    });
    $("#"+id).css("color","red");
    //create onclick event on new elements
    $("li").each(function(){
        $(this).click(myFunc($(this).attr("id")));
    });
}

Jquery从mysql第一次起作用

3 个答案:

看看这个例子