I want to modify an Id of button 'B' when button 'A' is clicked, and listen to the click event of of 'B' using Jquery but my code doesn't work,
this is an example of my code:
$(function() {
$(".nuttonA").click(
function() {
$("#buttonB").attr("id","notButtonB");
});
$("#notButtonB").click(function(){
console.log(" notButtonB is clicked "); //show nothing
});
});
i think you need event delegation. try this:
$(function() {
$(".buttonA").click(
function() {
$("#buttonB").attr("id","notButtonB");
});
$( "body" ).on( "click", "#notButtonB",function(){
console.log(" notButtonB is clicked "); //show nothing
});
});
Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using delegated-events approach when manipulation properties.
General Syntax
$(document).on('event','selector',callback_function)
Example
$(document).on('click', ".nuttonA", function(){
$("#buttonB").attr("id","notButtonB");
});
$(document).on('click', "#notButtonB", function(){
//Your code
});
In place of document you should use closest static container.
Related
I've written a jQuery function which updates a div upon clicking another div. However, it is only firing on the second click each time and I'm rather confused.
How can I fix this?
$(document).ready(function(){
$(".block-swatch").click(function(){
$("#refresh-feefo").load(window.location.href + " #refresh-feefo" );
});
});
You should consider using .on as it allow to bind event from a parent and if your DOM element #refresh-feefo isn't ready, it will still work.
$(document).ready(function(){
$("body").on('click', '.block-swatch', () => {
$("#refresh-feefo").load(window.location.href + " #refresh-feefo" );
});
});
I used body , but be careful:
Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of $( "body" ).on( "click", "#commentForm .addNew", addComment ) use $( "#commentForm" ).on( "click", ".addNew", addComment ).
Read Event performance section here for more: https://api.jquery.com/on/
I am testing out some functionality and I am trying to make so once I hover on a particular element (in this example any link) it will output something inside the console.
I have looked at this answer -> here where it says "you can define your function once, and it will execute for any dynamically added elements"
So I have this js script but once the elements are loaded dynamically, i.e. like youtube videos, but once I hover on the newly added elements, this script will not work, no output inside the console.
$( "a" ).on({
click: function() {
console.log('clicked');
}, mouseenter: function() {
console.log('enter');
}, mouseleave: function() {
console.log('left');
}
});
Am I missing something here?
The way you have bound the elements is used to bind multiple event handlers to the same elements. If they are dynamically added then you will have to resort to event delegation. Where you will be binding the event to a parent element which is present when the event is bound.
$( "body" ).on('click', 'a', function() {
console.log('clicked');
});
$( "body" ).on('mouseenter', 'a', function() {
console.log('enter');
});
$( "body" ).on('mouseleave', 'a', function() {
console.log('left');
});
you can replace the body with any other closest parent to a which is present at the time of event binding.
I have two <select> elements: select.exerciseType and #moduleTopic, each with their own handler wrapped around the document. I believe it's important to know that select.exerciseType is dinamic and there can be multiple of those.
Their events are:
$(document).ready(function() {
$(document).on("change", $("select.exerciseType"), function(e) {
<!--Code not really important-->
}
$(document).on("change", $("#moduleTopic"), function(e) {
<!--Code not really important-->
}
}
My problem is, when I change the selected option in one of those selects, both those events are firing. Why is the selector in the on() function not working and how can I make it work?
Syntax for jQuery .on handler is .on( events [, selector ] [, data ], handler ) where second argument is string
In your case, as it is not string, it is omitted and the event is always triggered when it reaches the selected element!
$(document).ready(function() {
$(document).on("change", "select.exerciseType", function(e) {});
$(document).on("change", "#moduleTopic", function(e) {});
});
Can you use this code instead:
$("#moduleTopic").change(function() {
// code executes here
});
EDIT ---
You can use a classname and detect the <select> being changed by the use of $(this) inside your function.
You don't need document.ready and you also just specify the selector, not retrieve it. i.e.
// class example
$(document).on("change", "select.exerciseType", function(e) {
// Code not really important
});
// ID example
$(document).on("change", "#moduleTopic", function(e) {
// Code not really important
});
I am trying to do something ostensibly simple in jsfiddle and it is not working. Essentially I have an h1 html tag with class "me" and a button with class "poo". The first click works and my css color changes, however the second click does not work?
$(".poo").click(function(e){
e.preventDefault();
$(".me").css("color","green");
var haha = $("<button>Click Me!!!</button>");
$(this).after(haha);
$(haha).addClass("changer");
$(this).hide();
});
$(".changer").click(function(e){
e.preventDefault();
$(".me").css("color","black");
$(this).hide();
});
Bind the second click to the parent element:
$(document).on('click', '.changer', function() {
//function here
});
The changer click handler is bound before the element exists. Try using the $.on method instead.
http://api.jquery.com/on/
$('body').on('click', '.changer', function() {...})
This works because the event handler is bound to the document body, which already exists on the page. When there is a click anywhere in the body, jQuery will check if the clicked element matches the selector .changer and execute the callback if so.
Alternatively, you could just bind the $('.changer').click event within the first callback.
Update fiddle: http://jsfiddle.net/0yodg7gb/7/
$(".poo").click(function(e){
e.preventDefault();
$(".me").css("color","green");
var haha = $("<button>Click Me!!!</button>").addClass('changer');
$(this).after(haha);
$(haha).addClass("changer");
$(this).hide();
bindClick();
});
function bindClick(){
$(".changer").bind('click',function(e){
e.preventDefault();
$(".me").css("color","black");
$(this).hide();
});
}
I have several HTML elements, that are rendered by a javascript function on the page:
Test
Test
Test
I then have further javascript that I use to create a function when Test is clicked:
$(document).ready(function(){
$( ".test1" ).click(function() {
// Code here
});
$( ".test2" ).click(function() {
// Different code here
});
$( ".test3" ).click(function() {
// Different code here
});
});
However, because the HTML inserted is not loaded at the same time the page loads (it is dynamically inserted after), my click function doesn't capture the event. How can I solve this?
You need to use a delegated event handler:
$(document).ready(function(){
$(document)
.on('click', '.test1', function() {
// Code here
})
.on('click', '.test2', function() {
// Code here
})
.on('click', '.test3', function() {
// Code here
});
});
Note, for best performance document should be changed to the closest static parent element which is available on DOM load.
Use .on()
As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.
$(document).on('click', '.test', function() { //code here });
Syntax
$( elements ).on( events, selector, data, handler );
You can make your click events "live", so they attach to objects as they are introduced to the dom.
Just change
.click(function(){ .... });
to
.live('click', function(){ .... });