We Keep Coding

span inside of lightbox won't trigger function

I have added a CodePen Demo
I'm trying to make the lightbox close when the close button is clicked. Currently, the lightbox will only "close" or trigger the close function on the background only.
Not sure what I'm doing wrong.
CodePen Demo
So far I have tried these slectors that don't trigger the closing function:
$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')

You should bind the click event on the document using $(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); }); because the div lightbox-item is empty when you run $('.lightbot-item .close-button').click(function(){ closeLightbox(); }); at the end of your code.
You can also bind the click event after you append the content in the function openLightbox. It would look like this
$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });
I created a fork of your pen using the first solution.

Detecting a click outside either of two elements?

I've got a little autocomplete dropdown which I want to hide when someone clicks outside the textbox. I've been using this so far
$("#input-group_ids").on("blur", function () {
$(".input-dropdown").hide();
});
However my autocomplete dropdown has an overflow and a scroll bar if there are more than 10 options. When using the above code, clicking on the scroll bar closes the dropdown.
I need the dropdown to close only if the click is outside the textbox AND the dropdown itself. How do I do that?

Not yet tested hope this will work
$("html").click (function () {
$(".input-dropdown").hide();
});
$("#input-group_ids, .input-dropdown").click (function (e) {
e.stopPropagation;
}

In case you won't get clear with the blur event, try to register the click event to an element that is surrounding both the textbox and the dropdown. It may even be the body.
Then in the click event check the event.target element. If it is neither the textbox nor the dropdown, close it.
It feels clumsy, I know, but it is one of several working options.

Try this :
$("*:not(#input-group_ids)").on("click", function () {
$(".input-dropdown").hide();
});
Not tested because you didn't gave any jsfiddle

Have you tried the not selector the name explains it all and might work if you have a container on the dropdown and textbox

a little hackish but might work.
$(elementContainingTheDropDownContent).on('mouseleave', function(e){
$(window).on('click', function(e){
//close dropdown
})
}).on('mouseenter', function(){
$(window).off('click');
})

I found another answer to this which is actually the best version I think
$(document).click(function(e) {
if (!$('#input-group_ids').is(e.target) && !$('.input-dropdown').is(e.target))
$('.input-dropdown').hide();
});
This is slightly better than Benjamin's answer as it doesn't stop propagation of any clicks on $("#input-group_ids"), which may have unintended consequences. However I'm accepting Ben's answer as it worked and solved my problem, and he deserves the credit. =)
EDIT: Actually my version is pretty similar to #singe31's version, so I upvoted that one too

Deleting a dynamically added div on a parent causes it to append again

JsFiddle
I am trying to dynamically add a div on clicking td.active. I wish to remove the dynamically added div when someone click on the close button or click on other td.active
Right now my code just append another div when the close button is clicked. can anyone help me to fix the issue.
$(function() {
$('td.active').click(function(event){
$(this).append('<div class="planner-modal"><div class="planner-modal-header"><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h5 class="text-center">modal heading</h5></div><div class="planner-modal-body">modal body</div><div class="caret-container"><div class="top-caret"></div><div class="bottom-caret"></div></div></div>');
});
$('.planner-modal-header.close').click(function(e){
$(this).closest('planner-modal').remove();
});
});

I have gone through the jsfiddle and fixed it. you were trying to call click event on dynamically added content for ding this we can use jQuery on method.
i am sharing the jsfiddle link.
$(document).on("click",'.close',function(e){
$('.planner-modal').remove()
});
click here to see the working jsfiddle example
thanks

Use event delegation for dynamicaly created element
$('td.active').on("click", ".planner-modal-header .close", function (e) {
e.stopPropagation();
$(this).closest('.planner-modal').remove();
});
DEMO
use e.stopPropagation(); to stop the bubbling event

Checkbox Styling with SelectAll Function

Was styling the checkboxes of my webpage with jquery using the tutorial here
But i realized that I could not do SelectAll checkbox that will select all the checkboxes in my list. It works in the backend (the checkboxes are selected) but it does not show in my page.
Added a demo to show my problem. May need to port to your system to test it out
Demo
what can I add to the jQuery Custom Radio-buttons and Checkbox javascript file in the to achieve the select all checkbox function
Thank you!

You can try this FIDDLE:
$(function () {
var $chbxs = $('.checkbox');
$('#sel_all_lbl').toggle(
function() {
$chbxs.css('background-position', '50% -50px');
$('#checkboxall .truefalse').prop('checked', true);
},
function() {
$chbxs.css('background-position', '50% 0px');
$('#checkboxall .truefalse').prop('checked', false);
}
);
});
What I've done? First, in your fiddle you need to correct some syntax errors, then add a plugin code to the DOM, and you scripts to the script panel, so they will fire when DOM is ready. (This is all about jsFiddle, so you to understand how it works)
About actually your code, you attached click-handlers (.toggle()) to the checkbox element. But click event does not fire on it. Script simply changed the property of the checkbox, but there is no click. So you need to attach these handler to the element wish user actually clicks, that is square icon. (I added an id="sel_all_lbl" to it)

Try to use event handling on the select all checkbox and manually check all the checkboxes from javascript.

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.

This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});

The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle

From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.

I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance

You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});

I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>

Use disabled
$(this).attr("disabled","disabled");

Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})

A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.