Develop Reference

Disabling the OnClick in a nested Div programmatically with Javascript/JQuery

I have a Javascript application which allows users to enable/disable controls at runtime. I have been successful in disabling/enabling nested inputs and buttons, but so far I have had no success in disabling an onclick event in a Div, so that the circled icon will not be selectable:
The generated HTML looks like:
<div id="56f81c3d-9666-4dab-8f35-d36e894f426f" class="field alert-success">
<div class="field-name">By default I am disabled - Single Photo</div>
<div id="56f81c3d-9666-4dab-8f35-d36e894f426fPhoto" class="clearfix" style="cursor: pointer; max-width: 100%; max-height: 100%;" onclick="ffffield.getFieldHandler('PhotoPicker').showPhotoCapture(this, '56f81c3d-9666-4dab-8f35-d36e894f426f');">
<img class="pull-right" src="/MySite.Web/Content/device/images/chevronRight.png" style="width: 20px; position:relative; top: 7px;">
<img class="pull-right" src="/MySite.Web/Content/device/images/photoPickerPlaceholder#2x.png" style="width: 40px; position:relative; top: -5px;">
</div>
</div>
</div>.
In this snippet, it is the "onclick" that I need to disable. I am not picky - it can be disabling the pointer or the onclick.
I have tried the following attempts to make this work:
$("#56f81c3d-9666-4dab-8f35-d36e894f426f").children().off('click');
and
$("#56f81c3d-9666-4dab-8f35-d36e894f426f input").prop("disabled", true);
and
$("#"#56f81c3d-9666-4dab-8f35-d36e894f426f input").attr("disabled", true);
and
$(""#56f81c3d-9666-4dab-8f35-d36e894f426f input").attr("disabled", "disabled");
based on some other stackoverflow questions.

.off() can only disable event listeners that were added with .on() (or other jQuery methods, since they all call .on() internally). To remove an event listener that was added using the onclick attribute, you need to reassign the onclick property:
$("#56f81c3d-9666-4dab-8f35-d36e894f426f").children().prop('onclick', null);

Try this code:
function disableDiv( div ) {
div.addEventListener( "click", function ( event ) {
event.stopPropagation();
}, true );
}
// call the disable div handler
disableDiv( document.getElementById( "56f81c3d-9666-4dab-8f35-d36e894f426f" ) );

Change class group of buttons

I have three buttons and each one has a CSS class. At click of one of them, i would like remove the class and add a new CSS class only for the clicked element. Furthermore, I need to keep pressed the selected button.
I searched some examples and I found that is possible do something like this:
$(".class").removeClass("choice").addClass("active");
This works for all buttons, but not only for one. I try to change this in
$(this).removeClass("choice").addClass("active");
but this didn't work.
I make a fiddle for more compreansion: https://jsfiddle.net/90u6b3tj/3/
EDIT
I need the same behavior when i press a second time
Sorry for the basic problem.
Thanks in advance
Regards

I've updated your jsfiddle for a working solution:
https://jsfiddle.net/90u6b3tj/10/
Here's the javascript part:
$(function() {
$("button").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
});
});

as you are adding your click events like so:-
<button id="hourly" class="choice" onclick="change()">Orario</button>
you could use event.target:-
function change(){
event.preventDefault();
$(event.target).removeClass("choice").addClass("active");
}
OR, change your event and pass in this:-
<button id="hourly" class="choice" onclick="change(this)">Orario</button>
so you can do:-
function change(element){
event.preventDefault();
$(element).removeClass("choice").addClass("active");
}
OR better still:-
$('.choice').click(function(e){
e.preventDefault();
$(this).removeClass("choice").addClass("active");
});
and remove the inline click event.

You can use the following code instead.
$(".class").click(function(){
$(".class").addClass("choice");
$(".class").removeClass("active");
$(this).removeClass("choice").addClass("active");
});
Here, the "choice" class is removed only from the clicked class. Not from the others. Also the "active" class is added to the clicked one.

You may use change(this) in your button markup and refer to that element in your change() function, as shown in this fiddle.

function change(event){
event.preventDefault();
//$(".choice").removeClass("choice").addClass("active");
$(event.target).removeClass("choice").addClass("active");
}
<div>
<button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>
<div>
<button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>

Should it possible so select more than one item as active?
If not, checkout this:
Markup
<div>
<button id="hourly" class="choice">Orario</button>
</div>
<div>
<button id="daily" class="choice">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice">Mensile</button>
</div>
CSS
.active {
background-color: #A60076;
color: #FF0000;
}
.choice {
background-color: #000000;
color: #FFFFFF;
}
JS
$(document).ready(function() {
$('button').click(function(e) {
$("button").addClass('choice').removeClass('active');
$(this).removeClass('choice').addClass('active');
});
});
Here is a sample fiddle with the above code working.

Showing a div on button click

I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}

You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});

Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});

Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.

Remove click event on item with added class of 'selected'

I'm new here and new to JavaScript and JQuery.
I've been working on a little script to get a part of my page switching videos from Youtube.
The problem I have is when a thumbnail has the class of 'selected' added I want to disable the click function to stop the video reloading - is there a simple way around this?
I attempted to put another bit of JQuery in to find the item with the 'selected' class and return false but I know this is wrong because that will stop the default browser behaviour and not the click event.
Also I'd be very grateful for explanations on code suggestions and also suggestions to improve/streamline my JQuery code.
Thanks in advance!
HTML:
<iframe id="vid" width="980" height="551" src="http://www.youtube.com/embed/hziG9Nr6KHU?&rel=0&controls=4&wmode=transparent&modestbranding=1&rel=0&showinfo=1" frameborder="0" allowfullscreen></iframe>
<ul id="videos">
<li id="one">
<a class="selected" href="http://www.youtube.com/embed/hziG9Nr6KHU?&rel=0&controls=2&wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
<img src="http://placehold.it/320x180" />
<span class="AGreg">Vid1</span>
</a>
</li>
<li id="two" class="left">
<a href="http://www.youtube.com/embed/V1bFr2SWP1I?&rel=0&controls=2&wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
<img src="http://placehold.it/320x180" />
<span class="AGreg">Vid12</span>
</a>
</li>
<li id="three" class="left">
<a href="http://www.youtube.com/embed/XLgYAHHkPFs?&rel=0&controls=2&wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
<img src="http://placehold.it/320x180" />
<span class="AGreg">Vid3</span>
</a></li>
</ul>
CSS:
iframe#vid{width:980px;height:551px;}
.selected img{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}
#videos .cursorD a{cursor:default!important}
#videos a:hover img{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}
ul#videos{margin:20px 0;padding:0;}
ul#videos img{}
ul#videos li{float:left;width:320px;}
ul#videos li.left{margin:0 0 0 10px}
JQUERY:
$(document).ready(function(){
$("ul#videos li a").click(function(){
$("iframe").attr("src", $(this).attr("href"));
$(this).closest('ul#videos').find('.selected').removeClass('selected');
$(this).parent().addClass('selected cursorD');
return false;
})
});
CODEPEN: http://codepen.io/PixelsPencil/pen/uljzy

You could remove the event handler on the clicked video like you want to, but that requires a bit of code. An easier and (i.m.h.o. more elegant) solution is to adjust your selector / event handler hookup so it only gets executed on elements that do not have the class "selected":
$(document).ready(function(){
$("ul#videos li a:not('.selected')").click(function(){
$("iframe").attr("src", $(this).attr("href"));
$(this).closest('ul#videos').find('.selected').removeClass('selected');
$(this).parent().addClass('selected cursorD');
return false;
})
});
I have to confess, I didn't test it and I'm not 100% sure on the evaluation priority of :xyz() type selectors. To be more certain of what is happening, you could either change the single selector to a selector chain:
$("ul#videos").find("li").find("a:not('.selected')").click( ... );
or even better, hook the event handler to a parent object, but only have it trigger on distinct elements (also expressed through a selector):
$("ul#videos").on("click", "li a:not('.selected')", function() { ... });
This has the added charm that the handler will automatically work for lis that are added after wiring the event handler.

This seemed to work - asked a few people for help and a colleague came up with this still not sure why/how this works but it does.
var VideoLoader = {
registerClickHandlers: function() {
$("ul#videos li a").click(VideoLoader.showSelectedVideo);
},
showSelectedVideo: function() {
if(!VideoLoader.checkVideoIsAlreadyPlaying(this)) {
$("iframe").attr("src", $(this).attr("href"));
$(this).closest('ul#videos').find('.selected').removeClass('selected cursorD');
$(this).parent().addClass('selected cursorD');
}
return false;
},
checkVideoIsAlreadyPlaying: function(clickedObject) {
return $(clickedObject).parent().hasClass("selected");
}
};
$(document).ready(VideoLoader.registerClickHandlers);
Updated my Codepen here: http://codepen.io/PixelsPencil/pen/uljzy

thanks for replying again! I've had a play and put something up on jsfiddle but think it's more broke now than it ever was haha. When I click something with notselected class all thumbs change class and when I click a selected class the video loads in the parent instead of switching the attr in the iframe - any ideas where I've gone wrong?? jsfiddle.net/wvPnA

JQuery: How to stop child onclick event while still triggering the parent onclick event

I wonder how can I stop child onclick event while still triggering the parent onclick event. For example the following structure:
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
if I click "child1" for example, the onclick event for "child1" will not be triggered, however, the onclick event for "parent" will still be triggered.
Thank you very much!

You could just pass the click to the parent?
$('.child1').click(function(e){
e.preventDefault();
$(this).parent('#parent').trigger('click');
});
When you click .child1, it will prevent the default action, and then trigger the click for the parent of child1 with an id of #parent.
Actually - probably ignore the above - as per the comment below it may cause bubbling. All you really need to do is use e.stopPropagation();.
I've created a jsfiddle showing how although the child1 has a click function bound to it, it's being ignored, and so the parent click is only getting picked up.

The simplest way to do this is unbind the child's event handler.
$('#child1').unbind('click');

Here is a solution bin for above issue. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7l
HTML
<div id="parent">
<div id="child1">
Child-1
</div>
<div id="child2">
Child-2
</div>
<div id="child3">
Child-3
</div>
</div>
jQuery
$(function() {
$("#parent").click(function() {
alert("Parent has been clicked too...!");
});
$("#child1").click(function(e) {
e.stopPropagation();
alert("Child-1 has been clicked...!");
});
$("#child2").click(function() {
alert("Child-2 has been clicked...!");
});
$("#child3").click(function() {
alert("Child-3 has been clicked...!");
});
});
CSS
#parent{
padding:5px;
background:#a34477;
width:140px;
text-align:center;
padding:10px;
}
#parent div{
border:1px solid #2211a4;
background:#a3a5dc;
width:100px;
text-align:center;
font-size:14px;
margin-left:10px;
margin-top:3px;
}
Demo: http://codebins.com/bin/4ldqp7l

do you mean:
$('#parent').on('click', function(e) {
if( e.target !== this ) {
return;
}
});