We Keep Coding

Javascript to disable the click

HTML:
this should be disabled button
<a href="#" onclick='$("a#one").click();'>click button 2</a>
Javascript:
$(document).ready(function () {
$('#one').click({
alert("clicked!");
});
});
How do I make the 1st link unclickable, while the 2nd link actually clicks the 1st link.

Simply trigger the click after disabling what you want disabled:
Here's a working fiddle to demonstrate.
CSS
.disableClick {
pointer-events: none;
color: grey;
}
HTML
this should be disabled button<br />
click button 2
JavaScript
$(document).ready(function() {
$('#one').click(function () {
alert("Link one clicked!");
});
$("#two").click(function () {
$("#one").trigger("click");
});
});
Additional Information
As it relates to disabling your anchor, there are lots of options. Start here - How do you make an anchor link non-clickable or disabled?

Another way could be to use jquery one, where you will bind the event everytime and use it
this should be disabled button
click button 2
Observe that I have added an id to the second anchor tag
$(document).ready(function () {
$('#one').unbind("click"); //unbind the click on the first anchor
$('#two').bind("click", function(){ //bind it for once.
$('#one').one("click", function(){
alert( "one click triggered" );
});
$( "#one" ).trigger( "click" ); //trigger the click after binding it for one
});
});

select div but not inputs within div jquery

I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});

You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});

When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );

When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});

Stopping propagation on multiple hover event

My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/

Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>

Element inside div should not interfere on the event handler

I have a div and inside it I have a p. The paragraph is visually above the div. My event handler is being affected by the paragraph.
This is my event handler:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});
So, when I am moving my mouse on the div, it will toggle the class if I cross the paragraph. What I want is to only toggle the class once I enter/leave the div. I also tried to use this:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() {
$(this).toggleClass("active-b");
});
But now it toggles twice once I move my mouse above the paragraph...

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
if (this.id == "container-map")
{
$(this).toggleClass("active-b");
}
});
That should work. It only fires when this has the same id as the div.

You have to use mouseenter not mouseover
$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() {
$(this).toggleClass("active-b");
});

If what you want is that your active-b class is only affected when you leave/enter.
You need to use mouseenter not mouseover.
$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});

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