This question already has answers here:
Persist variables between page loads
(4 answers)
Store a css class on browser
(1 answer)
Closed 6 years ago.
Hi is it possible to add class to element and storage it in element if the page reloads ?
<button></button>
<div class=""></div>
$(document).ready(function () {
$("button").click(function() {
$("div").addClass("test");
});
});
try
$(document).ready(function () {
$("button").click(function() {
$("div").addClass("test");
localStorage['testClass'] = 'test';
});
previousTestClass = localStorage['testClass'];
if (previousTestClass)
$('div').addClass(previousTestClass);
});
Related
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I have a really strange issue. I simply want to select a clicked element. I did this a lot of times and it always worked but this time, the jQuery $(this) selector doesn't select the clicked element, it selects the window object. Please let me know, if you have an idea, what could be the reason for this. I am using jQuery 2.1.4 and Twitters Bootstrap 3.3.5
HTML:
<a class="btn btn-danger btn-xs delete-file"><i class="fa fa-trash" aria-hidden="true"></i> Löschen</a>
jQuery:
$(document).ready( () => {
$('.delete-file').on('click', () => {
let element = $(this);
console.log(element);
});
});
Console-Output:
n.fn.init [Window]
instead of:
n.fn.init [a.btn.btn-danger.btn-xs.delete-file]
Thank you in advance!
It's because you're using an arrow function. The scope of the contents of this function do not change as per a standard function definition. For this to work you'll need to change the logic:
$(document).ready(() => {
$('.delete-file').on('click', function() {
let element = $(this);
console.log(element);
});
});
Alternatively you could keep the arrow function and retrieve a reference to the clicked element through the target property of the event that's raised:
$(document).ready( () => {
$('.delete-file').on('click', e => {
let element = $(e.target);
console.log(element);
});
});
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 7 years ago.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = $("div.rsCloseVideoBtn");
var vid_launch = $("h1#vidLaunch");
vid_launch.click(function () {
vaStyle.addClass("hprs-video-active");
});
vid_detach.click(function(){
vaStyle.removeClass("hprs-video-active");
});
Why isn't my removeClass working? Is there a better method?
Also, when you declare a var does it work document-wide?
Sounds like your elements are getting added dynamically. Use event delegation for solving this. I made changes to the event binding.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = "div.rsCloseVideoBtn";
var vid_launch = "h1#vidLaunch";
$(document).on('click', vid_launch, function () {
vaStyle.addClass("hprs-video-active");
});
$(document).on('click', vid_detach, function () {
vaStyle.removeClass("hprs-video-active");
});
This question already has answers here:
JQuery combine $(document).ready and $('DropDown').change declaration
(2 answers)
Closed 8 years ago.
i want to change this line of code to run ready and change
jQuery('#form_auction_type').change(function(e) {
editing the line to
jQuery('#form_auction_type').ready(function(e) {
fixes my problem, but i still need .change function
the whole code:
jQuery('#form_auction_type').change(function(e) {
if (jQuery('#form_auction_type').val() == '2') {
jQuery('#form-row-rapper-price_bin').show();
} else {
jQuery('#form-row-rapper-price_bin').hide();
how can i put ready and change in the same line!!
Change it to
jQuery(function($) {
$('#form_auction_type').on('change', function() {
$('#form-row-rapper-price_bin').toggle($('#form_auction_type').val() == '2');
}).trigger('change');
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
So let's assume that I have this simple code:
HTML:
<div id="test">Hello!</div>
<input type="submit" id="update_map" value="Update!" />
JQUERY:
$("#id").mouseover(function ()
{
alert("TRUE");
});
So far everything works perfect, but when I'm updating the test div with that code:
$("#update_map").click(function ()
{
$.post( "update_ajax.php", function( data ) {
$( "#test" ).html( data );
alert("Done!");
});
});
But now, when I clicked on "Update!", and I'll move my mouse over the "test" div, it won't work.
How can I solve that problem?
try $().on, it is the new version of $().live which does exactly what you want:
$('body').on('mouseover','#id', function(){
alert('true');
});
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
I'm trying to remove the css when somewhere on the page has been clicked. I know how to implement the css changes but can't figure out how to or where to place the listener for a mouse click.
Any suggestions would be great.
$(document).ready(function() {
var friends = false;
$('#friends').click(function() {
friends = true;
$('#cont').css({'left':'502px'});
$('#members').css({'left':'251px','display':'inline','opacity':'1'});
alert(friends);
});
if($(document).click() && friends){
alert('here');
};
});
Got it working eventually using this but modified it alot:
jQuery().ready(function(){
$('#nav').click(function (event) {
$(this).addClass('activ');
event.stopPropagation();
});
$('html').click(function () {
if( $('#nav').hasClass('activ') ){
$('#nav').removeClass('activ');
}
});
});