jQuery不适用于Element类单击
[英]jQuery is not working on Element class click
问题描述
Following script is not working on my HTML page, any suggestions: 
以下脚本在我的HTML页面上不起作用，任何建议：
$(document).ready(function() {
$('li.nf-next-item').click(function() {
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
});
});
Jquery is also added in the file.( <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script> ) jQuery也会添加到文件中。（ <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script> ）
Following is the HTML code, it is in the .php file(actually it is a wordpress theme): 以下是HTML代码，位于.php文件中（实际上是wordpress主题）：
<div class="sidebar-header">
<div class="step-1 displayBlock">
<h2 class="formTitle"> <?php the_field('title_step_1') ?></h2>
<h3> <?php the_field('text_step_1') ?></h3>
</div>
<div class="step-2 displayNone">
<h2 class="formTitle"><?php the_field('title_step_2') ?></h2>
<h3> <?php the_field('text_step_2') ?></h3>
</div>
</div>
3 个解决方案
解决方案1
0 2018-09-20 08:47:06
try with: 尝试：
$('li.nf-next-item').on('click', function() {
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
});
It's better to use .on because uses less memory and works with dynamically added elements. 最好使用.on因为它使用较少的内存并可以动态添加元素。
解决方案2
0 已采纳 2018-09-20 08:47:59
Most likely, the elements you're trying to bind events to have not yet been added to markup by the time you're doing the binding. 最有可能的是，您要绑定事件的元素在进行绑定时尚未添加到标记中。
In order to fix this, you should wrap to any ancestor of the elements that exists in the page at the time you're running the script. 为了解决此问题，您应该在运行脚本时将其包装到页面中存在的元素的任何祖先。
For example: 例如：
$('.sidebar-header').on('click', 'li.nf-next-item', function(){
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
})
You could also wrap the entire code in a function, check if the element you're binding to exists and, if not, wait some time and run the function again. 您还可以将整个代码包装在一个函数中，检查要绑定的元素是否存在，如果不存在，请等待一段时间，然后再次运行该函数。 Example: 例：
function binderCallback() {
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
}
function scriptBinder() {
if ($('.sidebar-header').is('.sidebar-header')) {
$('.sidebar-header').on('click', 'li.nf-next-item', binderCallback);
} else {
setTimeout(() => {scriptBinder()}, 1000);
}
}
$(() => { scriptBinder() });
However, this construct is potentially dangerous and should be avoided as if, for any reason, the element you're waiting on is never added to the page, your script will continue calling itself forever. 但是，此构造有潜在的危险，因此应避免使用，因为无论出于何种原因，您正在等待的元素都不会添加到页面中，您的脚本将永远继续调用自身。 One safety measure around this is to place an iterator in the function and only allow it to call itself a finite number of times. 围绕此的一种安全措施是在函数中放置一个迭代器，并仅允许其调用有限次。 Example which quits trying to bind after 10 attempts, made at intervals of 1 second: 该示例在以1秒为间隔的10次尝试后退出尝试进行绑定：
let binderCounter = 0,
binderCallback = function() {
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
};
function scriptBinder() {
if ($('.sidebar-header').is('.sidebar-header')) {
$('.sidebar-header').on('click', 'li.nf-next-item', binderCallback);
} else {
if (binderCounter++ < 10)
setTimeout(() => {scriptBinder()}, 1000);
}
}
$(() => { scriptBinder() });
Another alternative to the above is to bind on an element that you are certain exists when you do the binding. 上述的另一种选择是绑定到您确定绑定时存在的元素。 Like <body> : 像<body> ：
$('body').on('click', 'li.nf-next-item', function(){
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
})
While the above will surely work (as long as your li.nf-next-item is correct, of course), it's less than optimal. 尽管上述方法肯定可以工作（当然，只要您的li.nf-next-item是正确的），它就不是最佳选择。
As stated in their documentation : 如其文档中所述 ：
Attaching many delegated event handlers near the top of the document tree can degrade performance.
documentordocument.bodyfor delegated events on large documents.document或document.body用于大型文档委派的事件。
解决方案3
0 2018-09-20 10:25:33
Where is the html for button or li on which you are applying the click.? 您要在其上应用点击的按钮或li的html在哪里？
Check if li.nf-next-item is an li element & this class ( nf-next-item ) is added onto that li element. 检查li.nf-next-item是否是li元素，并将此类（ nf-next-item ）添加到该li元素上。 If that's a button, will not work. 如果那是一个按钮，将无法使用。
And if it is a dynamic element which is getting added later, you probably do this $('body').on('click', 'li.nf-next-item', function() { instead of $('li.nf-next-item').click(function() { .. And it should work. 如果它是一个动态元素，稍后会添加，则可以使用$('body').on('click', 'li.nf-next-item', function() {代替$('li.nf-next-item').click(function() { ..并且它应该可以工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.