当展开点击 li 的 ul 事件时，JS JQUERY 错误不起作用

JS JQUERY bug when expanding ul event of click on li doesnt work

本文关键字：JS JQUERY 不起作用 错误 事件 ul li      更新时间：2023-09-26

我创建了一个简单的网页来学习 JQuery，但是每当我点击按钮时：另一个它使点击 li 的事件消失，出现故障，当点击 li 时它什么也没做......这是代码：JS：

$(document).ready(function(){
console.log("Ready");
var toggle = 0;
$("li").on("click",function(){
    console.log("Clicked on li");
    try{
        $(this).hide(800);
        $(this).removeClass("con");
        $(this).addClass("con");
    }
    catch(err){
        console.log("Exception "+err.message);
    }
});
$("input").on("focus",function(){
    console.log("Focused on input");
    $("li").hide(800);
    $("#D").html("Open div");
    toggle = 1;
});
$("input").on("focusout",function(){
    console.log("FocusedOut on input");
    $("li").html($("input").val());
    $("li").show(500,function(){
        $("#D").html("Close div");
        toggle = 0; 
    });
});
$("button").on("click",function(){
    console.log("Clicked button :"+$(this).html());
    if($(this).attr("id")=="s"){
        $("li").show(300);
    }
    else if($(this).attr("id")=="n"){
        $("li").removeClass("con");
    }
    else if($(this).attr("id")=="C"){
        $("li").addClass("con");
    }
    else if($(this).attr("id")=="an"){
        console.log("Added to html : "+$(".uDefined").html()+"<br/><li>"+$("li").last().html().substring(0,7)+($("li").last().html().substring(7,8)-(1)+1+1)+"</li>");
        $(".uDefined").html($(".uDefined").html()+"<br/><li>"+$("li").last().html().substring(0,7)+($("li").last().html().substring(7,8)-(1)+1+1)+"</li>");
    }
    else{
        $(".list").slideToggle(1000,function(){
            if(toggle==0){
                $("#D").html("Open div");
                toggle=1;
            }
            else{
                $("#D").html("Close div");
                toggle = 0;
            }   
        });
    }
});

}(;

.HTML：

<html>
<style type="text/css">
    .list{
        font-size: 100;
        background-color: white;
    }
    li{
        margin-left: 100;
        border-radius: 20;
        border-width: 3;
        background-color: Black;
        color:White;
    }
    .con{
        color:red;
    }
    .uDefined{
    }
</style>
<body onload="" style="background-color:gray;margin:40" >
    <title>JQuery TryOut</title>
    <h3 style="margin-left:800;">Welcome</h3>
    <button id="D">Close Div</button>
    <button id="s">Show All</button>
    <button id="n">Remove Classes</button>
    <button id="C">Add Classes</button>
    <div class="list">
        <ul class="uDefined">
            <li class="con">content1</li>
            <li>content2</li>
            <li>content3</li>
            <li>content4</li>
            <li>content5</li>
            <li>content6</li>
        </ul>
    </div>
    <div>
        <p>Please focus on this text box:</p><input id="ttt" placeholder="Enter text here" value="" type="text" />
    </div>
    <button id="an" >another one</button>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>

感谢帮手！

直接事件仅在调用 .on() 方法时附加到元素(存在(。因此，在动态添加按钮时，需要使用委托的事件处理程序。您应该像这样更改代码：

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

有关委派事件的更多信息：http://learn.jquery.com/events/event-delegation/

相关文章：