【jQ】在Elementor中寫的jQeury為何有時會失效?

在Elementor寫jQ有時明明code正確卻沒有執行成功,我曾卡關好久怎麼會這樣,後來發現主要是執行時機點與延遲問題造成...
我本身非程式底子,但我僅靠查資料與自我測試把jq運用到Elementor中做一點ui控制或客製,以下是我一點小筆記供參考,若有程式高手看到我有問題的點也請鞭小力點XD :

(1)兩個執行jq的時機

1-1.
$(window).load()方法, 這個方法會等到頁面所有內容加載完畢後才會觸發(包含所有非文字的如圖、影音等)。

<script>
$(window).load(function() {
//alert("hello");
});
</script>

1-2.
$(document).ready()方法,這個方法只是在頁面所有的DOM載入完畢後就會觸發(不包含圖片等非文字媒體文件)

<script>
jQuery( document ).ready( function( $ ) {
//alert("hello");
});
</script>

(2)Timeout延遲執行
在Elementor中,有時候要加上timeout才能正確執行想要執行的code。
像之前版友發問的要讓網頁載入時自動把收合容器展開,如果沒有加上timeout,就算code是正確的也無法生效。

jQuery( document ).ready( function( $ ) {
setTimeout(function() {
$(".elementor-accordion-icon:eq(0)").trigger("click");
}, 500)
});

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要問我相關的話,可以加入FB社團一起交流或寫信給我: smallway.tw@gmail.com
  • 如果您需要更系統性的學習,歡迎參考我的線上課程或家教班
  • 如果您有單一性的問題,例如網站健診、文章問題、做不出的功能,目前接受付費線上家教

發表留言