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/