We Keep Coding

add and remove css class on hover

So I have this code and it works:
$('.col-main').on('mouseenter', '.product-wrapper', function () {
$( this ).addClass( "js-hover" );
});
$('.col-main').on('mouseleave', '.product-wrapper', function () {
$( this ).removeClass( "js-hover" );
});
But I want it to be a bit more elegant. Something like this:
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );
But I can´t get it to work :) Any help is appreciated

I think the problem is with productWrapper variable. Try like followoing.
var listContainer=$('.col-main')
var productWrapper='.product-wrapper';
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );

sth like this?
$('.col-main').on('mouseenter mouseleave', '.product-wrapper', function (e) {
$( this ).toggleClass( 'js-hover', e.type === 'mouseenter');
});

The jQuery hover and toggle functions could be useful to you.
$('.element-selector').hover(function(){
$(this).toggleClass('.class-to-toggle');
}, function(){
$(this).toggleClass('.class-to-toggle');
})
Fiddle: https://jsfiddle.net/sdso2219/
Update
Since you have now mentioned that this needs to work for dynamic elements, modify the .hover to .live, eg:
$('.element-selector').live('mouseenter', function(){
$(this).toggleClass('.class-to-toggle');
}).live('mouseleave', function(){
$(this).toggleClass('.class-to-toggle');
})

Why doesn't the hidden container reappear when I click on it?

I have a hidden container that contains comments, and a <div> with a <p> inside that says "Show all comments" that I click to show the comments. When I click the div it shows the hidden comments container perfectly, but when I click it again it doesn't hide the comments container. I am thinking there is something wrong with my jQuery code maybe?
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

When you initialize commentsHidden it is never updated so it always has its initial value. You need to check if its hidden on every click. So you don't need an if statement to attach the event. Just attach a single click event and check inside the event if its hidden and continue accordingly.
$(".see-all").click(function() {
var commentsHidden = $(".comments-container").is(":hidden");
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

When you call on('click', ..) or its shortcut click(..), you install a new handler. What ends up happening is that you have multiple handlers on the same object, and they all get called. Instead, either install the handler only once:
// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
if ($( ".comments-container" ).is( ":hidden" )) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
or unbind the old handler:
$( ".see-all" ).off('click'); // Unbind all click handlers
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

You need to check the flag state inside the click function(). The way you have it now will only bind the click handler once on page load.
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

Try changing to
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
}
});
The click handler should only be bound once, and you need to check whether comments are hidden each time the p element is clicked.

How to define function on click, after element append in dynamically or (setTimeInterval) [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have made on click function for dynamic elements but its not working, Is there a way around it?
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 5000 );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
//alert(1);
});
var loop = setInterval(function(){
$('.box').append('<button>Trigger custom event</button>');
},1000);
window.setTimeout(function(){ clearInterval(loop); },2000);
For code click here

use below code
you need to learn about event-delegation
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
DEMO
$( document ).on('click',"button",function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
NOTE : you can use nearest static parent selector instead of document.

How do I add time delay

I would like to add a custom class on mouseover. So that when the mouse is hovered over .leftbar, a class is added and it should be popped up(I set css for his). How do I add slow or time delay for the popup?
<script>
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
$( "body" ).addClass( "myclass" );
});
});
$(document).ready(function(){
$( ".leftbar" ).mouseleave(function() {
$( "body" ).removeClass( "myclass1" );
});
});
</script>
I tried this- $( "body" ).addClass( "myclass" , '300'); with no luck
Thank you!

You can use setTimeout
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
window.setTimeout(function(){
$( "body" ).addClass( "myclass" );
}, 300);
});
}):
See https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

You could take a look at the jQuery UI method addClass which allows you to pass in some animation parameters into it. View the example and documentation here http://api.jqueryui.com/addClass/
For your use, it should be as simple as adding in the delay to addClass()
Add a reference to the jQuery Library, then change your code to;
$("body").addClass("myclass", 300);

Use a setTimeout, being sure to clear it when the cursor leaves.
Minor error, but myclass != myclass1.
$(document).ready(function(){
var barTimeout = 0;
$( ".leftbar" ).on({
mouseenter: function(){
barTimeout = setTimeout(function(){
$( "body" ).addClass( "myclass" );
}, 300);
},
mouseleave: function(){
if( typeof barTimeout !== 'undefined' ) clearTimeout( barTimeout );
$( "body" ).removeClass( "myclass" );
}
});
});
JSFiddle

You can do it like this:
$(document).ready(function () {
$(".leftbar").hover( function () {
$(this).delay(300).queue(function(next){
$(this).addClass("myclass");
next();
});
}, function(){
$(this).delay(300).queue(function(next){
$(this).removeClass("myclass");
next();
});
});
});
Check it out here: JSFiddle

Jquery codes does not work on external loaded html file

I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});

Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});

Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});

need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});