We Keep Coding

Using Parents() on an element which gets reinserted on click

I have created a dropdown functionality using Jquery with one event listener that allows me to close the dropdown when clicked anywhere outside the dropdown container and another event listener which handles the submenu items.
By design the dropdown should stay open even if the submenu items are clicked and should only close if the toggle button is clicked or the user clicks outside the dropdown container.
The problem
Lets say that general.js has the click event listener as follows
$('document').on('click.namespace',function(e){ // do stuff });
Now anotherscript.js has an event listener which handles the actual sub menu clicks
$('#clickbutton').on('click', function(e){
// Remove all html from inside the .dropdown container
// Recreate the html using another js function
$('.container').html(recreatedhtml);
});
The problem occurs when I try to identify who the parent of the submenu button click target is, because I want to know if the click was inside the container or outside.
Since a click on #clickbutton removes html from the container and reinserts it I believe this causes problems for the parents() function therefore the parents('.dropdown') function returns false even though the sub menu item is a descendent of the dropdown class.

Check the target of the event
$(document).on('click.namespace',function(e){
if(!$(e.target).closest(dropdownContainerSelector).length){
// click is not in dropdown container
}
});
Note that document is not a string, it is a global object within window

CKEditor widget double click to open dialog does not work

I have created the most simple widget which consists of a single div with a class. The template is;
<div class="simple" data-padding="false"></header>
The Dialog contains 1 checkbox to change the padding.
This widget works all ok, is upcasted nicely, shows the yellow line around it when you hover over it. However it is impossible to double click on it to open the dialog, nothing happens, no console errors as well. I should expect that double clicking inside the div should open the dialog.
When a second div is nested, which is set to be the editable and some padding is added to the main div, it is possible to double click on the padding area between the two divs which opens the Dialog, that is however of course not what I want..
What is going wrong here, is this a bug?

I initially solved it by adding a listener to the double click event;
CKEDITOR.plugins.add('simple', {
init: function(editor) {
editor.on( 'doubleclick', function(e) {
var ClickedWidget = e.editor.widgets.widgetHoldingFocusedEditable;
if (ClickedWidget != null && ClickedWidget.name == 'simple') {
ClickedWidget.edit();
}
});
This worked nicely but got in the way with selecting text in an editable element. That thus also explains why it is setup like that.
So to solve this properly I created a plugin that shows a context menu on right clicking the widget, with the options to edit and remove. I have made this plugin available on CKEditor website for others to use;
http://ckeditor.com/addon/widgetcontextmenu

jQuery .not() issues

The premise of what I'm trying to do is use jQuery to start a CSS transition to open and close a search box.
User clicks magnifying glass icon, box opens, user clicks anywhere on the page but the search form, box closes.
To close, using this:
$('body *').not('#header-search, #header-field, #header-submit').click(function () {
And different variations of the answer found here: jQuery - Select everything except a single elements and its children? without success.
Clicking on the input#header-field always closes the box.
Pen Here:
http://codepen.io/anon/pen/RNbmwr
Thanks for reading.

Your code is very aggressive (it gets applied to all elements, so inner element to those in the .not() will trigger it).
It is better to delegate the closing of the box to the body (since click events bubble up), and manually cancel any event that occurs under the forbidden list.
$('body').on('click', function(){
// code for closing box here
});
$('#header-search, #header-field, #header-submit').on('click', function(){
return false; // stop bubbling of event
});
And since in your example the #header-field and #header-submit are descendants of header-search you only need to cancel the bubbling on that
$('#header-search').on('click', function(){
return false; // stop bubbling of event
});
Demo at http://codepen.io/gpetrioli/pen/XJrwXO

Try the jQuery toggle() function:
<script>
$( "button" ).click(function() {
$( "p" ).toggle( "slow" );
});
</script>
Substitute the id for your magnifying glass for "button" and change the paragraph -- $("p") -- the search controls you want to show/hide. Toggle changes the visibility of the indicated id or class. If it is initially hidden, mouse click will make it visible; if initially visible, mouse click will hide it.
Finally, change the speed of the transition if you don't want it to move "slow"
A more complete explanation of toggle() is available at http://api.jquery.com/toggle/

There are many elements on the page. Some of them may contain or be contained by the elements you name. So they will still trigger the event.
Instead, bind a single event handler:
$("body").click(function(evt) {
and check if you clicked on one of the elements:
if( $(evt.target).parents("#header-search").length > 0) {
cancelling the handler if so:
return true;
}
Perform the actual event otherwise:
doSomething();
});

JQuery: How to select window and some other divs by id?

I have a context menu that pops up whenever a click happens at a certain div inside a container and I want it to hide if either the window element or its container is scrolled.
How can I add the 'window' element in there?
$("#tree-container").scroll(function(){
$cxtMenu.hide();
});

If i understand your question, try:
$("#tree-container").add(window).scroll(function(){
$cxtMenu.hide();
});
If not, please consider to provide a jsFiddle which replicates your issue

You can add a scroll handler directly to the window like
$( window ).scroll(function() {
//Do stuff
});
(Per "Example: To do something when your page is scrolled" of http://api.jquery.com/scroll/)

How do I make this popup box disappear when I click outside?

http://jsfiddle.net/mnbayazit/by3zy/2/
I want the popup to disappear when I click somewhere on the background. Problem is, it disappears when I click an [X] or the popup itself.
Imagine it being a calendar-picker if that makes my intentions more clear.
How can I get it to do that?

Set a click handler for the body to remove your popup.
Set a click handler for the popup itself that calls stopPropagation() on the event, to prevent it from bubbling up to the body.
Roughly:
function showMyPopup(){
...
$(myPopupDiv).click(function(e){
e.stopPropagation();
});
}
function closeMyPopup(){
...
}
$(document.body).click(closeMyPopup);

The basic jist with this technique is to have a wrapping (or independent element layered with z-index) that 'captures' the click event, and hides the elements you desire. I've updated your fiddle with an example of how this would work, except imagine that the blanket element would have a height and width of 100% (to cover the entire viewport).