[英]JQuery and onclick doesn't work in this context
努力使jquery和li在这种情况下工作:
<div id="statLateralMenu">
<h3>Statistics</h3>
<ul>
<li id="id1" class="selected">Stat 1</li>
<li id="id2">Stat 2</li>
</ul>
</div>
s
$(function() {
$("#statLateralMenu li").click(function()
{
alert( "A" );
$("#statLateralMenu li").removeClass("selected");
$(this).addClass("selected");
});
}
);
我很确定该错误也是非常愚蠢的,这是因为我已经在页面的另一个区域中实现了此代码,并且可以正常工作,但是这次确实无法使其正常工作。 有什么线索吗?
编辑:
我不能连火警报,我的问题是,(还)没有改变类的li
。 jQuery在同一页面中加载,因为我有另一个ul / li复合体,它运行完美
编辑2:在这一点上也许我有点混乱,但在这里使用我的代码也无法正常工作: https : //jsfiddle.net/nakjyyaj/4/
似乎有效:
$(function() { $("li").click(function() { $("li").removeClass("selected"); $(this).addClass("selected"); }); });
.selected{background:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>azerty</li> <li>bzerty</li> <li>czerty</li> </ul>
要处理动态内容,可以使用事件委托:
$(function() { $("ul").on("click", "li", function() { $("li").removeClass("selected"); $(this).addClass("selected"); }); }); setTimeout(function () { $("p").remove(); $("ul").html("" + "<li>azerty</li>" + "<li>bzerty</li>" + "<li>czerty</li>" ); }, 1000);
.selected{background:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Wait 1 second.</p> <ul></ul>
尝试更改$("#statLateralMenu li").removeClass("selected");
至
$(this).removeClass("selected");
像那样
$(function() {
$("#statLateralMenu li").click(function()
{
alert( "A" );
$(this).removeClass("selected");
$(this).addClass("selected");
});
}
);
但是,如果您只想更改设计元素,则可以使用:hover
li:hover {
background-color: yellow;
}
在您的JSFiddle中,您忘记了加载JQuery框架。 您不需要JSFiddle中的脚本标签(不需要和)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.