Tutorial Menggunakan jQuery pada WordPress dengan benar

Seringkali kita menemui masalah dalam menggunakan library javascript khususnya library jQuery pada WordPress.

Sebagai contoh kita membuat fungsi alert ketika tombol yang memiliki class tombol di klik. Kemudian kita menyisipkan script sebagai berikut:


This content originally appeared on DEV Community and was authored by Dhimas Kirana

Seringkali kita menemui masalah dalam menggunakan library javascript khususnya library jQuery pada WordPress.

Sebagai contoh kita membuat fungsi alert ketika tombol yang memiliki class tombol di klik. Kemudian kita menyisipkan script sebagai berikut:

$('.tombol').on('click', function() {
    alert('Testing Alert!');
});

Yang akan terjadi adalah tombol tidak bekerja sebagaimana mestinya. Jika di check ke console browser akan muncul pesan error Uncaught ReferenceError: $ is not defined. Nah error ini merujuk pada shortcut $ (tanda dollar) yang tidak terdefinisi ke library jQuery.

Script tersebut jika dijalankan pada halaman web pada umumnya, akan berjalan dengan baik, tetapi tidak di WordPress. Hal ini bisa terjadi karena library jQuery yang dipanggil oleh WordPress menggunakan mode “no conflict”. Hal ini diperlukan oleh WordPress untuk menghindari konflik dengan library-library lain yang mungkin juga menggunakan shortcut tanda $ (tanda dollar).

Cara mengatasinya sangat simpel, kamu cukup membungkus script di atas dengan jQuery seperti ini

OPSI 1

jQuery(document).ready(function(){
    $('.tombol').on('click', function() {
        alert('Testing Alert!');
    });
});

OPSI 2

(function($) {
    $('.tombol').on('click', function() {
        alert('Testing Alert!');
    });
})(jQuery);

Selamat mencoba 🙂


This content originally appeared on DEV Community and was authored by Dhimas Kirana


Print Share Comment Cite Upload Translate Updates
APA

Dhimas Kirana | Sciencx (2024-08-20T00:06:47+00:00) Tutorial Menggunakan jQuery pada WordPress dengan benar. Retrieved from https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/

MLA
" » Tutorial Menggunakan jQuery pada WordPress dengan benar." Dhimas Kirana | Sciencx - Tuesday August 20, 2024, https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/
HARVARD
Dhimas Kirana | Sciencx Tuesday August 20, 2024 » Tutorial Menggunakan jQuery pada WordPress dengan benar., viewed ,<https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/>
VANCOUVER
Dhimas Kirana | Sciencx - » Tutorial Menggunakan jQuery pada WordPress dengan benar. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/
CHICAGO
" » Tutorial Menggunakan jQuery pada WordPress dengan benar." Dhimas Kirana | Sciencx - Accessed . https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/
IEEE
" » Tutorial Menggunakan jQuery pada WordPress dengan benar." Dhimas Kirana | Sciencx [Online]. Available: https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/. [Accessed: ]
rf:citation
» Tutorial Menggunakan jQuery pada WordPress dengan benar | Dhimas Kirana | Sciencx | https://www.scien.cx/2024/08/20/tutorial-menggunakan-jquery-pada-wordpress-dengan-benar/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.