Develop Reference

My jquery script never executes, I believe it's an issue with the class selector

I have the following script:
<script>
$(".dropdown-menu li a").onclick = function () {
alert("got in");
};
</script>
and here's the code for my dropdown list
<div class="dropdown" style="margin:5px;">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Choose Fix Version
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="fixVersionDropdown">
<li>Test</li>
</ul>
</div>
The contents of the dropdown list are being built on the fly by another script, but I don't think that's the issue. If I use the inspector in Firefox, the "test" entry is listed as .dropdown-menu > li > a, which is the same as what I see if I inspect any of the dynamic entries. Additionally, when I select all .dropdown-menu > li > a entries, it highlights every item in the dropdown list.
So why doesn't clicking a .dropdown-list > li > a item not fire off the script?

You need to wait until the DOM is ready and your "onclick" should be just click.
$(document).ready(function () {
$(".dropdown-menu li a").click(function () {
alert("got in");
});
});

simple incorrect syntax
$(".dropdown-menu li a").click( function() {
alert("got in");
});
// -OR-
$(".dropdown-menu li a").on( "click", function() {
alert("got in");
});

Try:
$( document ).ready(function() {
$(".dropdown-menu li a").click= function () {
alert("got in");
};
})

Dynamically adding event listener in html

I have two ULs in HTML ,one for user and one for shared user.
<div class="container">
<div id="userList" style=" ;width:45%;margin:10px;display:inline-block;vertical-align: top;">
<span>Users</span>
<ul class="usersUL">
<li title="Add user">user1</li>
<li title="Add user">user2</li>
</ul>
</div>
<div id="sharedUsers"style="width:45%;margin:10px;display:inline-block;vertical-align: top;">
<span>Shared Users</span>
<ul class="usersUL" >
</ul>
</div>
</div>
I want to add the li in UL one to the second list on user click and vice versa. The way I have done this is like so
//add to shared users from userslist
$("#userList li").click(function(){
$("#sharedUsers ul").append('<li title="Remove user">'+$(this).html()+'</li>');
//add to users list from shared users
$("#sharedUsers li").click(function(){
$("#userList ul").append('<li title="Add user">'+$(this).html()+'</li>');
$(this).remove();
});
$(this).remove();
});
I know what I doing wrong , I am not adding new event listener once the list item to sent back to the first UL from the second UL.But I am struggling to find the best way I can do this.
Here is the js fiddle: https://jsfiddle.net/4n7Ly4r2/

You can't nest a click event within a click event. Also, you need to bind the click event to the dynamic content using on():
JS Fiddle
$(document).on('click', '#userList li', function() {
$("#sharedUsers ul").append('<li title="Remove user">' + $(this).html() + '</li>');
$(this).remove();
});
$(document).on('click', '#sharedUsers li', function() {
$("#userList ul").append('<li title="Add user">' + $(this).html() + '</li>');
$(this).remove();
});

If you want to bind an event listener to a dynamically created element you need to use jQuery.on, like this $("#userList").on("click", "li", function(){ ... });.
Hope it helps.

Using 'on' or not does not really matter, as long as not defining function on the fly:
$('#userList li').click(relocLi);
$('#sharedUsers li').click(relocLi);
function relocLi() {
if ($(this).attr('title') == "Add user") {
$(this).attr('title', 'Remove user');
$("#sharedUsers ul").append($(this));
} else {
$(this).attr('title', 'Add user');
$("#userList ul").append($(this));
}
}

Set ID as input value on click of an element

When I click on my link it temporary pops up with the id number of that link.
Question How could I make it so if I click on a link then id would add that id to the input value where id is input[id="language_id"]
Code-preview MY Codepen Example
JQUERY
$(document).ready(function() {
$(".language li a").click(function(event) {
// Test make sure getting id
alert(event.target.id);
});
});
HTML
<div class="container">
<ul class="dropdown-menu language" role="menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<br/>
<br/>
</ul>
<form action="" method="post" id="language-form">
<input type="text" name="language" id="language_id" placeholder="Displays ID" value="" />
</form>
</div>

You have elements with the same ID; which is invalid HTML. Change one of them or use classes.
Element.id
It must be unique in a document
For your question use this.id with val(),
$('#language_id').val(this.id) //or event.target.id
Updated Codepen
$(".language li a").click(function() {
$('#language_id').val(this.id)
});

You can change the id of textbox by setting the id attribute of textbox.
$(".language li a").click(function(event) {
document.getElementById('language_id').id = event.target.id;
});

You can do like this
$(document).ready(function() {
$(".language li a").click(function(event) {
// Test make sure getting id
//alert(event.target.id);
$("#language_id").val(event.target.id);
});
});

$(document).ready(function() {
$(".language li a").click(function(event) {
$("#language_id").val(event.target.id);
});
});

your elementid shoud be unique
$(".language li a").click(function(event) {
$("input[id=language_id]").val(event.target.id);
});

To add multiple ids to the control Please give a try to this:
$(document).ready(function() {
$(".language li a").click(function(event) {
var str = $('#language_id').val() + "," + this.id;
$('#language_id').val(str.replace(/^,?/,""));
});
});

jquery make action when link menu item is clicked

I have three menu items here:
JSFIDDLE: FIDDLE LINK
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active">Blue<sup>beta</sup></li>
<li>Green<sup>beta</sup></li>
<li>Red</li>
</ul>
</div>
By default link blue is active.
I want whenever any link green or red is clicked, it should be active
Color of the label should be changed as per the link selected
I am facing trouble in this points.

You could add a DATA color on your li like that :
<li data-color="#0f0">Green<sup>beta</sup></li>
then use this code :
$(function () {
$(".menu-bar li a").click(function () {
$('.active').removeClass('active'); //Remove the current active item
var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
$("#l1").css("color", color); //Change color
});
});
Fiddle : http://jsfiddle.net/ZjgV4/6/

Something like this?
$(function () {
$(".menu-bar li a").click(function () {
$(".menu-bar li").removeClass("active");
$(this).parent().addClass("active");
});
});
http://jsfiddle.net/3mhCW/1/

Without completely doing everything, this should point you on the right track. A few things to note about your code - You should pass in the e event, to the click handler and use jQuery's e.preventDefault(); to stop the link. Also, you need to quote the value in the css function. .css("color", "red") otherwise you will get an undefined error that red is not defined. Instead of manipulating the css of the elements, I would use add/removeClass respectively and style the elements with css.
$(function () {
$(".menu-bar li a").click(function (e) {
e.preventDefault(); // stop the link from following the href
// remove the active class from everything
$(".active").removeClass("active");
// $(this).css("color", "red");
$(this).addClass("active");
});
});

I included the code here.
basically, i inserted the color name to a class each color has its own class and each LI has a global attribute data-* with the value of the color (the name of the class)
HTML:
add to all the li the attribute data-color="blue"
Add CSS:
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.red{
background-color:red;
}
jQuery:
$(function () {
$(".menu-bar li a").click(function () {
$('.menu-bar li.active').removeClass('active');
$(this).parent().addClass('active');
$("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));
});
});

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>

I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​

At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>

There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/