We Keep Coding

select jquery onChange not working with X-editable

In this fiddle, I'm using X-editable.
In the corresponding fiddle, I'm not able to make the below code working:
$('#practice').on('change', function() {
alert(this.value);
});
I'm already using anonymous function
I'm not using invalid expressions
I'm using this
I'm using select
Console is not throwing any error as such.
Where am I going wrong?

If you inspect the DOM when the editable is active (ie. the select is visible) you'll see that the select is not actually a child of the #practice span - it's in a sibling span named .editable-container. This is why your delegated event handler on #practice is not working.
That being said, if you read the X-Editable documentation there is an event you can hook to to achieve this directly without you needing to attach your own events - save.
Try this:
$('#practice').on('save', function(e, params) {
alert(params.newValue);
});
Updated fiddle

write custom function for navigation angularjs

So I have a navigation that I want to have a dropdrown menu with sub-menu functionality on it. I tried ng-show for showing and hiding the menus but then I would have to go back and click on item again to hide it. I want to be able to click to show, then click anywhere else to hide it.
trying to use ng-click but not sure where I should put my custom function that I want to retrieve regardless of the controller being used.
Would I put something like this in a directive? The function is not calling html or getting any content like a factory is generally for, it simply shows and hides content on different click events.

There are probably more complicated ways of doing this that might be more elegant, but I've found this to do the trick in the past. Assumes you're loading jQuery before Angular so $ is full jQuery. If you're finding yourself doing this with many different DOM elements though, it might be more effective to break this out into a factory that allows many objects to register themselves in this way with just one binding to body.
app.directive('clickOffHide',function() {
return {
...
link: function(.., elem, ..) {
$('body').click(function(evt) {
var $elem = $(elem);
var $target = $(evt.target);
if($elem.is($target) || $elem.has($target).length > 0) return;
$elem.hide();
});
}
}
});

You could try using ng-blur on the drop-down element.
<div ng-class="dropDown" ng-blur="functionToHideElement" tabindex="100">Products</div>
A div element can accept a blur event if it has a specified tabindex.
This way you can use a baked in Angular directive rather than creating your own.

Using jQuery to select checkboxes with click events

Is there a way to use jquery to select all checkboxes on a page that have an associated click event? I considered adding a class, for instance HasClickEvent, that I could use to identify such classes, but I am editing a huge script where click events are sporadically added all over the place and I think this would probably end up being messier, so a single jQuery call would be perfect

jQuery.each($('input[type=checkbox]').data('events'), function(i, event){
jQuery.each(event, function(i, handler){
if(handler.type.toString() == 'click')
{
// do something
}
});
});

To check all
$('.checkbox').attr('checked','checked'); // checkbox is the class for all checboxes to be selected change it with our own
To deselect all
$('.checkbox').removeAttr('checked');

A quick google reveals this plugin, but it's pretty old. You may be able to read the code and see how they are achieving it though :D

If the click events are attached using the onclick attribute (instead of added dynamically via JavaScript/jQuery), you can do it like this:
$("input[type=checkbox][onclick]").each(function() {
//All returned elements have an onclick attribute
});

Recursive jQuery function to amend select option values

I have a form that I am trying to alter with jQuery. Basically, my form has two elements and I need to change the value of the first option in each of them. However, there is an "add more" option that uses AJAX to dynamically generate another element that also needs changed. This add more button can be clicked an unlimited amount of times.
Right now I have this:
$(document).ready(function(){
$("#myname-0-field option:first").val("None");
$("#myname-1-field option:first").val("None");
});
This works fine, but once the "add more" button is clicked, I have more elements called "#myname-2-field", "#myname-3-field", "#myname-4-field" etc. These obviously aren't affected by adding another line into my jQuery as the document has already loaded when they are added.
So the real question is, can someone point me in the right direction of writing a function that can react when the new element is added and change it. If possible, I'm also looking for the function to be aware and look for "#myname-X-field option:first" for tidyness.

use live() function
Then using each function set value

From the jQuery API look live function
Maybe you could add class to your element, so that finding particular element would be easier and it would not add event to other similar elements.
In the example I have a Li with class
$('li.myClass').live('click', function() {
$(this).val(); // this is the getter for clicked value
$(this).val("some_value_here"); // this is the setter for clicked value
});
Now you can add more elements (that has myClass class) and it will have a click event.
Btw. if you know that all elements are inside some container (div for example) then you can write more efficient jQuery using delegate.
$('#container_id').delegate('li.myClass', 'click', function () {
});
This is more efficient because it looks your new elements only under "containter" not from the whole DOM structure.

jQuery Hide using ID

I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});

This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});

I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});

Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.