JQuery函数不会在首次点击时触发,但在所有后续点击中的行为均与预期的一样 [英] JQuery function doesn't fire on first click, but behaves as expected on all subsequent clicks
问题描述
我只需要选中的链接即可显示为选中状态并显示所指示的div,同时隐藏其他两个.这是jsfiddle:
I simply need the selected link to show as selected and to show the indicated div while hiding the other two. Here's the jsfiddle:
为什么第一次点击不起作用,但是之后每次点击都起作用?
Why is it not working the first click, but working every click after that?
$(document).ready(function() {
$('ul#chooseType li a').click(function(e) {
$('#active').click(function(){
$('.activeDiv').removeClass('show_hide');
$('.inactiveDiv').addClass('show_hide');
$('.thirdMenuDiv').addClass('show_hide');
$('#active').addClass('selected');
$('#inactive').removeClass('selected');
$('#thirdMenu').removeClass('selected');
});
$('#inactive').click(function(){
$('.activeDiv').addClass('show_hide');
$('.inactiveDiv').removeClass('show_hide');
$('.thirdMenuDiv').addClass('show_hide');
$('#active').removeClass('selected');
$('#inactive').addClass('selected');
$('#thirdMenu').removeClass('selected');
});
$('#thirdMenu').click(function(){
$('.activeDiv').addClass('show_hide');
$('.inactiveDiv').addClass('show_hide');
$('.thirdMenuDiv').removeClass('show_hide');
$('#active').removeClass('selected');
$('#inactive').removeClass('selected');
$('#thirdMenu').addClass('selected');
});
});
});
推荐答案
不要嵌套您的点击处理程序!摆脱所有包含的处理程序,一切就绪.小提琴: http://jsfiddle.net/tymeJV/HZ4CZ/2/
Dont nest your click handlers! Get rid of that all encompassing handler and you're set. Fiddle: http://jsfiddle.net/tymeJV/HZ4CZ/2/
此处理程序的轴:$('ul#chooseType li a').click(function(e) {
之所以有效,是因为您的点击处理程序实际上没有在页面加载时受到约束,而是在首次点击后便受到约束.
It works because none of your click handlers actually get bound on page load, they get bound after the initial click.
这篇关于JQuery函数不会在首次点击时触发,但在所有后续点击中的行为均与预期的一样的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!