We Keep Coding

How can I edit this one to expand onmouseenter and collapse onmouseleave

I am using a wordpress plugin that I have managed to change it a bit but I was thinking of making it expand onmouseenter and collapse onmouseleave but I am not sure how to edit it.
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = 'opened'
$catParent.toggleClass(state);
$(this).nextAll('ul.children:first').slideToggle(state);
});

You need to bind a function to the div:
$( 'div you want to hover selector' )
.mouseover(function() {
$catParent.toggleClass(state);
})
.mouseout(function() {
$catParent.toggleClass(state);
});
jQuery Mouseover

JQuery unable to perform hover events on dynamically added input boxes

I have been tying to perform hover operation on dynamically added input fields.
$( "body" ).delegate( "input", "hover", function(event) {
alert("ok");
});
Also tried using but works only for static fields.
$('input').hover(
function(event) {
alert("bring tooltip");
},
function(event) {
if (hasfocus) {
alert("Keep the tooltip");
}
}
);
Need suggestions.Thanks

Firstly, you should be using on().
Secondly, you shouldn't be using a hover event.
Thirdly, delegate to the document, not the body, or preferable just to the closest static parent element.
$(document).on({
mouseenter : function() {
},
mouseleave : function() {
if ( this === document.activeElement ) {
// has focus
}
}
}, 'input');

try this
$("input").on("hover",function(event){
alert("bring tooltip");
});

JQuery selector on click event

I want to trigger something when I click on a certain class within a div.
I tried this
$("div .event").click(function() {
alert($( this ).text());
});
And
$("div").on("click", $('.event'), function() {
alert($( this ).text());
});
//Or
$(".SimpleCalendar .event").click(function() {
alert($( this ).text());
});
//I do not even know what this is supposed to do ...
$(".SimpleCalendar tbody tr td div .event").click(function() {
alert($( this ).text());
});
And many more but still can not figure out why this is not working
My HTML is the following :

The div that you're selecting is the one that has the class .event, not a descendant of it. Therefore the correct selector is div.event. Try this:
$("div.event").click(function() {
alert($( this ).text());
});
Or just:
//Warning: if elements unlike the div also have the event class then stick to
//the above as the selector is more specific
$(".event").click(function() {
alert($( this ).text());
});
And don't forget that each of these options should be in DOM ready like so:
$(function() {
$("div.event").click(function() {
alert($( this ).text());
});
});

You were making use of parent descendent selector, since event class is on the div itself and not its descendent your selector was incorrect.
One of these should work for you
Try this
$("div.event").click(function() {
alert($( this ).text());
});
or,
$(".SimpleCalendar").on("click", '.event', function() {
alert($( this ).text());
});
For more information on choosing right selectors please see this

jquery slidetoggle how to set if mouse click other, close slidetoggle

I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/

$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....

You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle

Remove tag after hover

I am using following code to add line to my submenu :
$("li.mega-menu-megamenu a").hover(function(){
$( "<div class='remove'><hr /></div>" ).insertAfter("#mega-menu-primary-2 li:last-child" );
});
Its working perfectly fine.But the issue is that I want to remove that tag when there is no hover.
I have tried this : $("li.mega-menu-megamenu a").unbind('hover'); But by doing this, it will not add html tags at all.
How can I remove line when there is no hover on menu ?

You can use mouseout event for that
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").remove();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
});
Another possible solution is, instead of adding and removing the element you can just hide/show it.
$(document).ready(funnction() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
$(".remove").hide();
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").hide();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$(".remove").show();
});
});

I would opt for hide/show so you don't keep adding/removing from the DOM.
// Add the element to the DOM once and then hide it
var $removeElement = $( "<div class='remove'><hr /></div>" )
.insertAfter( "#mega-menu-primary-2 li:last-child" )
.hide();
// On mouseover we show the $removeElement and mouseout will hide it
$("li.mega-menu-megamenu a")
.hover(function(){ $removeElement.fadeIn(); },
function() { $removeElement.fadeOut(); }
);
I used fadeIn/fadeOut but you can use show/hide instead if prefered.

You can pass 2 functions to hover. Second will be called when mouse is exiting the element.
$("li.mega-menu-megamenu a").hover(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},
function() {
$(".remove").remove();
});

Another way:
$('li.mega-menu-megamenu a').on({
'mouseenter':function(){
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},'mouseleave':function(){
$(".remove").remove();
}
});