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");
});
Related
I'm a total beginner and I'm about to finish my first website.
But I just cant get the last button to work. Its the simplest task but this one is just not working.
$( document ).ready(function() {
alert("mailto script loaded!");
})
//eventhandler send-button
$('#send').onclick(function() {
alert( "Handler has beend called." );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonsend">
<button class="button button-pill button-flat-action" id="send">Senden</button>
</div>
Can you guys give me a hint where the problem is?
Thank you very much in advance. I googled everything but i unterstand basically what i need to do. I just cant see where i am going wrong.
The jQuery event is called click not onclick. Change to:
$('#send').click(function() {
Depending on where the JavaScript is placed on the page, you may need to wrap it in a DOM ready handler.
$( document ).ready(function() {
$('#send').click(function() {
alert( "Handler has beend called." );
});
});
Aside from putting the handler in the document ready, you should fix your syntax too. You need to use .on() to handle an event which is the first parameter to the method. Documentation here: https://api.jquery.com/on/
//alert if the js-script is succesfully loaded
$( document ).ready(function() {
alert("mailto script loaded!");
//eventhandler send-button
$('#send').on('click',function() {
alert( "Handler has beend called." );
});
})
Working Example:
http://jsfiddle.net/5xn5tpq4/
The code in the javascript pane is already wrapped with the ready handler.
I would like to trigger a javascript function when a specific URL is available on the page.
The url looks like:
I would like to use jQuery to detect the url and launch an event.
I have come this far:
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});
But it doesn't trigger the alert on a click. on the specific href. Can anyone help me on this one?
You need to wrap the code in document.ready to ensure that event gets bind to respective elements once they are there on page.like this:
$(document).ready(function(){
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});});
Demo
Alternatively, You can also use .on() with .click if dom is generated dynamically.like this:
$(document).on("click",'a[href="https://www.mypage.com/my-page/details.jsp"]',function() {
alert( "yoehoe" );
});
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
I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks
Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );
try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});
When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.
I've got the following link in my page,
<a href="#dialog" name="delete" data-id="75351" id="delete-75351" >Delete</a>
In my page script, I've defined the following.
$(document).ready(function () {
$('a[name=delete]').click(function (e) {
alert('Delete Clicked');
});
});
My links all work fine using this. However, there are times when I need to dynamically add a link. I use this jquery to add the link to a cell in a table.
var actionCell = $('#itemlist').find(rowId).find(actionCellId);
$('<a>Edit</a>').attr({ 'id': 'edit-' + response.id, 'href': '/Item/Edit/' + response.id }).appendTo(actionCell);
//This line doesn't work. Doesn't get registered with JQuery
$('<a name="delete">Delete</a>').attr({'id':'delete-' + response.id, 'href':'#dialog','data-id':response.id}).appendTo(actionCell);
So here I add two links. The Edit link calls a method on my MVC3 Controller. The second one, Delete, needs to function like the others and have it's click event handled in the jquery function found at the top of this post.
Both the links are created the way they should, and the Edit link works, but the delete link's click event is never handled by my javascript method.
UPDATE
I applied the solution suggested here, but it's not working. My jquery now looks like this.
$(document).ready(function () {
//select all the a tag with name equal to reject
$('a[name=delete]').on('click', function (e) {
alert('Delete Clicked');
});
});
I did notice though a difference in the link I added and the identical links added at page load.
Here is the link I added via jquery
<a name="delete" id="delete-75641" href="#dialog" data-id="75641">
Here is a link added when the page loaded.
<a name="delete" id="delete-75642" href="#dialog" data-id="75642" jQuery17008581920570114187="3">
What is the jQuery17008581920570114187="3" ??
Here is how I define the link in my page. (Actually a view using MVC3 and Razor)
<a href="#dialog" name="delete" data-id="#item.ItemID" id="delete-#item.ItemID" >Delete</a>
The click method only binds a click event handler to elements that exist at the time you call the click method. Try the on or live method, instead.
For example, if you are using jQuery 1.3.x - 1.6.x, use the deprecated method live:
$(document).ready(function () {
$('a[name=delete]').live('click', function (e) {
alert('Delete Clicked');
});
});
If you are using jQuery 1.7 or later, use the new on method:
$(document).ready(function () {
$('body').on('click', 'a[name=delete]', function (e) {
alert('Delete Clicked');
});
});
If using jQuery 1.7+ replace the click event with the on() method.
$(document).on('click', 'a[name=test2]', function (e) {
alert('Delete Clicked');
});
EDITED: per dgvid comment!