Develop Reference

Why only single change event is working on select element in jQuery?

I need to change behavior of jQuery library (date range picker), it have code like this:
box.find('.month').off("change").change(function(evt) {
dateChanged($(this));
});
box.find('.year').off("change").change(function(evt) {
dateChanged($(this));
});
Those are two select elements. It don't return false and functions inside handler don't access the event. But for some reason my events that use delegation doesn't work. They are ignored.
$picker.on('change', 'select', function() {
console.log('CHANGE');
});
The console log is not executing, but if I remove previous lines from the library, my event delegation code works fine.
NOTE: $picker is object in my code that is parent of box element. But I also have event added on $(document) that is also not working.
First time I see something like this. Adding event directly to element, prevents event propagation. Can someone explain what is happening here? Is this documented anywhere?
This happens in Firefox and Chrome.
If someone need simple example, I can create one. But thought that this is self explanatory.
EDIT: I've created a simple reproduction and it works fine. I have complex application with a lot of files (R Shiny Application), but I don't see any change events in dev tools. Are there any way of making the event not propagate? Maybe using event capturing. What should I search for in order to find the code that is preventing the events from propagating?

jQuery find event handler(s) for this object on page

jQuery 1.11.2
Yes, I'm aware that it's been answered a couple of times before - but the provided replies doesn't work for me.
Using this page:
https://www.lensway.se/cart
I need to check if any events have been added to the "Lägg till linser"-button.
I use the solution from here:
jQuery 1.8 find event handlers
jQuery._data($('.add-row.LENS.btn.gray')[0], 'events')
But that returns undefined.
I know it has events, because I can see them in Chrome Dev Tools:
The actual code that's executed to add the code looks like this:
$(document).on("click", ".add-row", function(a) {
(I have no control over the code so I can't make modifications to it, I just need to detect if that code has been run and the element has the event)

Got it!
The event wasn't actually set on the object it was set on the document for some reason:
$(document).on("click", ".add-row", function(a) {
That's why the data object was empty (I was looking at the wrong element).

Gumby Framework - JQuery firing onclick event twice

I'm creating a new site with the Gumby CSS Framework: http://gumbyframework.com
When I use their JQuery to check for button click and wrap inside their Gumby JS ready function
Gumby.ready(function() {});
The event is fired twice. I've spent a while trying to debug and cant work it out.
CodePen demo here: http://codepen.io/ptimson/pen/LseFk?editors=101
HTML
<div id="btn">Button</div>
JS
// Gumby is ready to go
Gumby.ready(function() {
$('#btn').on(Gumby.click, function(e) {
e.preventDefault();
console.log('Clicked');
});
});
Note: Removing Gumby.ready works but I need to keep that function so that I know the Gumby functions are available right?

You're right, removing Gumby.ready is ok. According to the Documentation, Gumby will automatically initialize by default. For manual initialization you have to load the script with a flag:
<script gumby-init="false" src="js/libs/gumby.js"></script>
And than you can call Gumby.init().ready();
Here's the Documentation.
Best.

JQuery if statement for .is(':visible') not working

I have a div that when the page is loaded is set to display:none;. I can open it up using this simple code:
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'block'});
});
Once it's opened, I'd like the user to be able to close it so I tried using the .is(':visible') function and then wrapping my original code in an if statment but this time using display:none;
if($('.field-group-format-wrapper').is(':visible')){
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'none'});
});
}
This does not seem to work though and I am not getting any syntax errors that I know of.
I also tried this:
if ($('.field-group-format-wrapper').is(':visible'))
$(".field-group-format-toggler").click(function () {
$(".field-group-format-wrapper").css({'display':'none'});
});
... but that did not work either.

You can just use the toggle function:
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").toggle();
});
This will show the '.field-group-format-wrapper' elements if they are currently hidden and hide them if they're currently visible.
FYI the reason your code snippet in your question wasn't working is because you're only checking the visibility of the elements on dom ready, rather than on each click - so the event handler to show the elements will never be attached.

I guess your function is only being called on page load at which time all divs are hidden.
Why not check the visibility in the click event handler?
$('.field-group-format-toggler').click(function(){
var $wrapper = $('.field-group-format-wrapper'); //Maybe $(this).parent()?
if($wrapper.is(':visible'))
$wrapper.hide();
else
$wrapper.show();

As already mentioned, you can use the toggle function to achieve what you want.
To add a bit of extra information, when attaching events like you're doing, you're actually using a subscription model.
Registering an event puts it in a queue of events subscribed to that handler. In this case, when you add the second event to change the CSS, you're adding an event, not overwriting the first one.
Whilst thing isn't actually causing your problem, it's worth being aware of.

CKEditor with MVC: Event handling

I have the following code, which generates my default CKEditor on my form:
$('#Content').ckeditor({
filebrowserUploadUrl: '/ControlPanel/Reviews/UploadReviewImage/'
});
As you can see, my implementation is quite simple - most settings are controlled in config.js and are global to my site, except the uploader handlers.
Been looking for a few days, but can't find anything concise. I need to be able to detect when CKEditor is clicked, and make the window larger (though not full screen). I also want to display some help text when CKEditor is clicked... but I can't figure out how to handle dom events, or apply JQuery events to it? I've tried a few different things, the following being my latest attempt:
$("#Content").ckeditorGet().click(window.showDescription);
But I get a TypeError:
Uncaught TypeError: Object #<Object> has no method 'click'
Which is understandable, as CKEditor has its own event system.
The CKEditor documentation seems very unintuitive - and the examples aren't really much help.
UPDATE
I managed to get this working on my own, though because of thw way I've written my window.ShowDescription function, I needed to pass a JQuery event in to it. Here's the code for anyone interested :)
$("#Content").ckeditorGet().on("instanceReady", function () {
this.on("focus", function () {
this.resize(638);
// Mimic JQuery event for textarea
var originalEditor = $(this.container.$).parents(".input").find("textarea");
originalEditor.trigger(jQuery.Event("focus"));
});
this.on("blur", function () {
this.resize(400);
});
});

As you already suspected, what you did above won't work. The ckeditorGet method returns an instance of an editor, not the DOM element of the editor.
You can use the focus event of ckeditor to determine what to do when the editor receives focus.
Example:
$("#Content").ckeditorGet().on('focus', function(e) {
// do what you want on focus
});
May I suggest enabling the autogrow plugin to change the content area size? It's more generalized to the size of your content, and may work better than trying to resize on your own.