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/
Related
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.
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've been looking at this plugin here
http://roblaplaca.com/blog/2013/01/21/custom-styled-select-boxes/
In the instructions it says you can disable the list using this disable()
I added a button to the example 1 and have been trying to get the list to disable when the button is clicked to no avail.
I'm trying
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable("custom","disabled");
});
#start being the button id I am trying to use to disable the list
What am I doing wrong here? Using example1 template.
CustomSelect is either a class or a variable; you're using it as a html element which is incorrect. Either remove the quotes (if it's a variable) or add a dot before it (if it's a class).
According to their documentation
disable() Disables interactivity
.disable() does not take any parameters as you are trying to use, instead try this:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable();
});
});
in addition, your customSelect is not a valid selector unless you have an html element named customSelect, which I doubt. More than likely its the ID of the element you want, in which case you should use:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("#customSelect").disable();
});
});
you also may want to consider storing a reference to the list when you intialize it, much like this example from their docs:
<script>
var sb = new SelectBox({
selectbox: $("select.custom").eq(0)
});
sb.jumpToIndex(3);
sb.disable();
</script>
then you can call .disable on that reference you stored... will definately work that way.
try this one......
$("input").prop('disabled', true);
$("input").prop('disabled', false);
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(){ .... });
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.