We Keep Coding

This jquery selector not working, what am I doing wrong?

I want to attach an onclick event to a, but cannot seem to achieve it with this:
$("[class^=field-promote_image_]").each(function() {
var a = $(this).find('.file-upload > a');
a.on('click', function(e){
e.preventDefault();
alert(a.attr('href'));
});
});
nor with this:
$("[class^=field-promote_image_] .file-upload > a").on('click', function(e) {
e.preventDefault();
alert($(this).attr('href'));
});
what am I missing?

Use attribute contains selector.
$('.field-row[class*="field-promote_image_"] .file-upload > a').on('click', , function() {
Warning: This will match all the elements whose class contains field-promote_image_. Ex. anything-field-promote_image_

I assume the class field-promote_image_de is dynamic that is why you are going for the attribute starts with selector, but it won't work because that is not the starting of the attribute value.
A right approach here will be is to add an additional class to that element like
<div class="form-row field-promote_image field-promote_image_de">
...
</div>
then just use the new class
$('.field-promote_image a').click(function(){
//your handler code
})

You can use this:
$(".file-upload > a").on('click', function(e) {
e.preventDefault();
alert($(this).attr('href'));
});

Enable only Click event inside mouseup event Jquery

I have ul tag inside div tag. I have applied mouseup event on div tag and click event on ul tag.
Issue
Whenever I click ul tag, then both mouseup and click events are triggered.
What I want is that when I click on ul tag, then only click event should trigger and if I do mouseup event on div tag, then only mouseup event should trigger.
My code:
HTML:
<div class="m1">
Nitin Solanki
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
JS:
$(document).on('mouseup', '.m1', function(){
alert('div mouseup ');
});
$(document).on('click', 'ul li', function(){
alert("ul li- clicked");
});
JSFIDDLE

You can stop the propagation of the event
$(document).on('mouseup', '.m1', function() {
alert('div mouseup ');
});
$(document).on('mouseup', '.m1 ul', function(e) {
e.stopPropagation()
});
$(document).on('click', 'ul li', function() {
alert("ul li- clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="m1">
Nitin Solanki
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

You can use jQuery's is() to check if the clicked element is a div or a list:
$(document).on('mouseup', '.m1', function(event){
// Check if the clicked element is the div and not the list
if($(event.target).is('div'))
alert('div mouseup ');
});
$(document).on('click', 'ul li', function(){
alert("ul li- clicked ");
});

The reason is event bubbling. You can handle this using event.stopPropagation();
$(document).ready(function(){
$("ul li").click(function(event){
event.stopPropagation();
alert("The ul li element was clicked.");
});
$(".m1").click(function(){
alert("The div element was clicked.");
});
});

It's a strange question, as part of a "click" is actually a mouseup.
A click comprises of a mousedown followed by a mouseup on the same element.
The only thing I think you could do here is to store when a click has started, and add a onesecond timeout to a variable that the mouseup event depends on.
Like this. (I feel dirty even posting this).
var clickStarted = false;
$(document).on('click', 'ul li', function(){
alert("ul li- clicked");
clickStarted = false;
});
$(document).on('mousedown', 'ul li', function(){
clickStarted = true;
setTimeout(function(){ clickStarted = false; }, 1000);
});
$(document).on('mouseup', '.m1', function(){
if(!clickStarted)
alert('div mouseup ');
});
JSFiddle

Removing class if click outside of div (targetting class)

I have a menu where user clicks on link and list appears via .addClass( "show-nav" ).
Here is jsFiddle with JS code:
jQuery(".nav-js-trigger").each(function(){
this.onclick = function() {
var hasClass;
hasClass = jQuery(this).next().hasClass( "show-nav" );
jQuery('.show-nav').removeClass('show-nav');
if (hasClass === false) {
jQuery(this).next().addClass( "show-nav" );
}
}
});
I want to remove the class show-nav if the user clicks outside of the div with class show-nav. How do I do this?
I have seen examples of e.target div ID but not class, particularly not a scenario like this.

You can add an listener to the element with an event.stopPropagation() on it, and another listener to the body, to capture this event if not intercepted before.
Something like this:
$(".show-nav").on("click", function(event){
event.stopPropagation();
});
$("body").on("click", function(event){
$(".show-nav").hide(); // or something...
});
To simplify your use-case, here is a JSFiddle.
$(".trigger").on("click", function(event)
{
$(".menu").toggle();
event.stopPropagation();
});
$(".menu").on("click", function(event)
{
event.stopPropagation();
});
$(document).on("click", function(event)
{
$(".menu").hide();
});
.menu
{
display: none;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
menu
<div class="menu">Hello</div>

$(document).on("click", function(e) { if ($(e.target).is(".trigger") === false) {
$(".menu").hide();
}
});

How to exclude ID from click function?

I`m new to jQuery and would like to know how I can edit a click function.
Here is what the HTML looks like:
<ul class="result">
<li id="a"></li>
<li></li> //will be added through a loop depending on input
</ul>
So my problem is that when I will click at the li object it will do something. Now I would like to exclude li id="a" from that event. I thought return false; would handle this but it does not.
Here is what the jQuery function looks like:
$('.result li').click(function() {
$('.result li a').click(function (event) {
event.preventDefault();
event.stopPropagation();
});
some further code...
});
I also tried:
$('.result li').click(function() {
$('.result li a').click(function () {
return false;
});
some further code...
});
Thanks alot.

$('.result li:not(#a)').click(function() {

you can do this
$('.result li').click(function() {
if($(this).attr('id')!="your id")
some further code...
});

Try this:
$('.result li').click(function (e) {
if (e.target === this) {
some further code...
}
});
Here, this means the element in the current scope, which is always the li clicked here.
and e.target means the element actually clicked, which can be li or a.
So, in case the element actually clicked is not the li in the current scope, e.target === this return false and nothing happens (no click event is fired) and vice-versa.

A simple if should work:
$('.result li').click(function(ev) {
if (this.id == "a") {
return;
}
// Do your stuff
});

A negation pseudo-class(:not(X)) will do the job. You can get a better idea on negation pseudo-class Here
Now please try with this one
$('.result li:not(#a)').click(function() {
// Your code here...
}

returning clicked li class in an ul javascript/jquery

My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?

Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});

Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/

$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link

Handle the click event of the <li> instead of the <ul>.
You can then get this.id.

Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle

here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});

You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});