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