jQuery不适用于Element类单击

Question

以下脚本在我的HTML页面上不起作用，任何建议：

$(document).ready(function() {
    $('li.nf-next-item').click(function() {
        $(".step-1").removeClass('displayBlock').addClass('displayNone');
        $(".step-2").removeClass('displayNone').addClass('displayBlock');
    });
});

jQuery也会添加到文件中。（ <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script> ）

以下是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>

Answer 1

尝试：

$('li.nf-next-item').on('click', function() {
    $(".step-1").removeClass('displayBlock').addClass('displayNone');
    $(".step-2").removeClass('displayNone').addClass('displayBlock');
});

最好使用.on因为它使用较少的内存并可以动态添加元素。

Answer 2

最有可能的是，您要绑定事件的元素在进行绑定时尚未添加到标记中。

为了解决此问题，您应该在运行脚本时将其包装到页面中存在的元素的任何祖先。

例如：

$('.sidebar-header').on('click', 'li.nf-next-item', function(){
  $(".step-1").removeClass('displayBlock').addClass('displayNone');
  $(".step-2").removeClass('displayNone').addClass('displayBlock');
})

您还可以将整个代码包装在一个函数中，检查要绑定的元素是否存在，如果不存在，请等待一段时间，然后再次运行该函数。 例：

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() });

但是，此构造有潜在的危险，因此应避免使用，因为无论出于何种原因，您正在等待的元素都不会添加到页面中，您的脚本将永远继续调用自身。 围绕此的一种安全措施是在函数中放置一个迭代器，并仅允许其调用有限次。 该示例在以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() });

上述的另一种选择是绑定到您确定绑定时存在的元素。 像<body> ：

$('body').on('click', 'li.nf-next-item', function(){
  $(".step-1").removeClass('displayBlock').addClass('displayNone');
  $(".step-2").removeClass('displayNone').addClass('displayBlock');
})

尽管上述方法肯定可以工作（当然，只要您的li.nf-next-item是正确的），它就不是最佳选择。
如其文档中所述：

在文档树的顶部附近附加许多委托的事件处理程序可能会降低性能。 每次事件发生时，jQuery必须将该类型所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。 为了获得最佳性能，请在尽可能靠近目标元素的文档位置附加委托事件。 避免过多使用的document或document.body用于大型文档委派的事件。

Answer 3

您要在其上应用点击的按钮或li的html在哪里？

检查li.nf-next-item是否是li元素，并将此类（ nf-next-item ）添加到该li元素上。 如果那是一个按钮，将无法使用。

如果它是一个动态元素，稍后会添加，则可以使用$('body').on('click', 'li.nf-next-item', function() {代替$('li.nf-next-item').click(function() { ..并且它应该可以工作。

jQuery不适用于Element类单击

问题描述

3 个解决方案

解决方案1
0 2018-09-20 08:47:06

解决方案2
0 已采纳 2018-09-20 08:47:59

解决方案3
0 2018-09-20 10:25:33

jQuery不适用于Element类单击

问题描述

3 个解决方案

解决方案1 0 2018-09-20 08:47:06

解决方案2 0 已采纳 2018-09-20 08:47:59

解决方案3 0 2018-09-20 10:25:33

解决方案1
0 2018-09-20 08:47:06

解决方案2
0 已采纳 2018-09-20 08:47:59

解决方案3
0 2018-09-20 10:25:33