Develop Reference

jQuery does not select elements (Wordpress)

I am using Insert Headers and Footers plugin for Wordpress and I am trying to embedd some javascript code will react to the user's actions.
So this is the simple code that I have tried:
$("a#newsLetter").click(function() {
alert("element was clicked");
});
I also tried:
$( "#newsLetter" ).on( "click", function() {
alert("element was clicked");
});
Both did not work, even though I know that jQuery is loaded and included ( I performed a simple test and of alerting some message on page load)
This is the tag shown in the inspector:
<a href="#" class="elementor-button-link elementor-button elementor-size-xl" role="button" id="newsLetter">
Thanks.
EDIT:
This is how I included jQuery

Use the three parameter form, it applies to elements added after the click handler has been added:
$( document.body ).on( "click", "#newsLetter", function() {
alert("element was clicked");
});

If jquery not working then try this
document.getElementById("newsLetter").onclick =function(){
alert('clecked');
}
Link

Try replacing $ with jQuery
jQuery("a#newsLetter").click(function() {
alert("element was clicked");
});

Swiperight and swipeleft gestures for slideshow from w3school

I have a problem with jquery swiperight and swipeleft gestures.
I have two slideshows, first one is Bootstrap Carousel and second one is inspiration from w3school.
(codepen)
I found good solution for Bootstrap somewhere on this page. Here is the code. It works perfect.
$(document).ready(function() {
$(".carousel").swiperight(function() {
$(this).carousel('prev');
});
$(".carousel").swipeleft(function() {
$(this).carousel('next');
});
});
but if I want this code include and modificate to code from w3school it won't work. So I tried something like this (It won't work in codepen I don't know why..)
$(function(){
$( ".news-slide-content-img" ).on( "swipeleft", swipeleftHandler );
$( ".news-slide-content-img" ).on( "swiperight", swiperightHandler );
function swipeleftHandler( ){
plusSlides(1).css('display', 'block');
}
function swiperightHandler( ){
plusSlides(-1).css('display', 'none');
}
});
If I swipe it it swipe more images than one.
Any ideas how to solve this gesture problem?
Here is codepen

It is just a matter of jquery version. Using the documentation of the function swipeleft and swiperight, these versions of jquery solve the issue:
src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
However, you also have a typo in the function swipeleftHandler and swipeleftHandler; you can consider these changes:
function swipeleftHandler( ){
plusSlides(1);
}
function swiperightHandler( ){
plusSlides(-1);
}
You can have a look at this working snippet : https://codepen.io/edkeveked/pen/ypyJJX

Trigger jquery .on() on page load

I am trying to find out if I can trigger some javascript code when page has loaded and not only on keyup
$(document).on('keyup', '.some-class', function (e)
{
// Some code
});
I have tried the following and that didn't work (my research indicate that it shouldn't work either):
$(document).on('keyup load', '.some-class', function (e)
{
// Some code
});
$(window).on('keyup load', '.some-class', function (e)
{
// Some code
});
UPDATE:
My question seems to be unclear in regards to what I want to accomplish. The code works fine when using keyup in an input field.
But I also want the code to run when the page loads.
I could do this but I am looking for a solution that are more elegant.
hello();
function hello() {
// Some code
}
$(window).on('keyup load', '.some-class', function (e)
{
hello();
});

Whilst you CAN trigger the keyup function on page load, I wouldn't recommend it. You're much better off defining the function you want to run elsewhere, then calling it on both load and keyup.
This way if you ever want to add anything to the keyup event that doesn't need to run on load, you can.
Something like, but not necessarily this, would work:
var myFunction = function() {
// Do some function stuff
return;
}
$(document).ready(myFunction);
$('.myElement').on('keyup', myFunction);
Or if you need to pass arguments to the function (which is a little closer to your use-case):
var myFunction = function(args) {
// Do some function stuff
return;
}
$(document).ready(function() {
myFunction(args)
});
$('.myElement').on('keyup', function(e) {
e.preventDefault();
myFunction(args);
// You can add more code here that won't be triggered on load
});

Maybe you are searching for $( document ).ready(). When the document is ready just run the code
$( document ).ready(function() { /* YOUR CODE HERE (maybe the $(document).on('key up'... */})

It sounds to me like you are wanting something like the following:
jQuery(document).ready(function(){
//Code Here
)};
Or window load (which was deprecated in 1.8 thanks to #charlietfl):
jQuery(window).load(function(){
//Code Here
)};

Creating my own plugin - Not working

I've been working through some tutorials to learn the basics of creating my own plugins.. But it doesn't seem to work.
What I'm trying to do is just create a basic slide toggle drop down (click once to display a div - click again to collapse it)
The content of the plugin I have:
$(document).ready(function () {
(function ($) {
$.fn.dropdown = function () {
$.fn.dropdown = function () {
this.preventDefault();
$('.expanded').slideToggle(1000);
}
return this;
};
}(jQuery));
});
The HTML I have is:
<div class="Btn">Click Here</div>
<div class="expanded">
Here<br/>
Is<br/>
Some<br/>
Extra<br/>
Content<br/>
</div>
And to execute the plugin, I have:
$( ".Btn" ).click(function() {
dropdown();
});
If someone could assist me with where I'm going wrong, it would be appreciated.
Thanks

Check out this jsfiddle: http://jsfiddle.net/yvanavermaet/sc6Bw/1/
$( document ).ready(function() {
$( ".Btn" ).click(function() {
$(this).dropdown();
});
});
(function( $ ) {
$.fn.dropdown = function() {
$('.expanded').slideToggle(1000);
return this;
};
}( jQuery ));
As some people have stated:
don't define $.fn.dropdown twice
don't define it in your document.ready (you should see it as a separate module)
use $(selector).dropdown();
e.preventDefault() doesn't have much effect on a div as it has no default.
Edit:
By the way, try and follow 1 coding standard. When adding the click-event, you're using double quotes and when adding the slideToggle you're using single quotes. Aswell as with the spaces.

To execute the plugin it should be:
$( ".Btn" ).click(function() {
$(this).dropdown();
});

This is a cut down version that works.
A couple of things, for some reason you wrapped $.fn.dropdown inside $.fn.dropdown, not sure why but I removed it. Also jQuery functions don't work like regular javascript functions, they're need $(). before hand, as they're inside jQuery's scope. Finally this.preventDefault won't do anything in this context, as there isn't a default.

Working with dynamic jQuery

I was wondering how to make this trigger work as I've tried all I can, but can't seem to find out the problem.
HTML
<div id="testFunc">Change AHref Class</div>
test
JavaScript
$(function () {
$("#testFunc").click(function () {
$('#testLink').removeClass("button");
$('#testLink').addClass("button2");
return false;
});
});
$(function () {
$(".button2").click(function () {
alert('test');
return false;
});
});
Somehow, the upon triggering testFunc which changes the source dynamically which causes the a href class to change from button to button2, it doesn't seem to register when i use button2 click.
Is there anyway to solve this?
Thanks!

Try .on()
Use Event Delegation.
$(document).on('click','.button2',function(){ code here });
Syntax
$( elements ).on( events, selector, data, handler );
Demo Working Fiddle , Problem Fiddle