We Keep Coding

Can't figure out why my change(...) event handler isn't working in this scenario

The relevant piece of HTML is like
<tbody id="results">
<tr>
<td>
<input type="checkbox">
c:\users\me\documents\visual studio 2013\Projects\myproj\Assets/someorg-somecategory-somepic.png
</td>
<td>someorg</td>
<td>somecategory</td>
<td>somepic.png</td>
</tr>
</tbody>
My intent is for the a elements next to the input elements to be visible or hidden depending on whether or not the input is checked.
Seems like it should be simple enough:
$('#results input').change(function() {
console.log("ok, this function got called.");
this.siblings('a').toggleClass('hidden');
});
inside a $(function() { ... });
But, that's not working. Nothing is being printed to the console when I test by checking or unchecking the element. Any idea why this might be? Need me to post any more code?

Add an id to the checkbox or class
<input type="checkbox" id="checkbox"/>
And use $(this) not this
$(this).siblings('a').toggleClass('hidden');
Working demo: http://jsfiddle.net/omnzocqq/
update
According to my idea, you forget to put the table wrap to tbody. But if you add your table wrapper element and edit this to $(this), your code works.
So you don't need to add a class or id to your checkbox.
http://jsfiddle.net/omnzocqq/3/
Demo

The issue is because within the handler this is a DOMElement. You need to wrap this in a jQuery object to be able to call jQuery methods on it:
$('#results input').change(function() {
$(this).siblings('a').toggleClass('hidden');
});
Example fiddle

Selecting a specific input and adding an event to it

I'm experiencing an frustrating problem.
I want to add an on-click event on an dynamically added input but I've been struggling with that for some time.
To show some code, here is my initial view
<div class="js-item-list"></div>
The user can then dynamically add data, this div is then populated for example like this (with initial divs)
<div class="js-item-list">
<div class="js-service-list-item>
<table>
<tr>
<td>Something</td>
<td><input type="text" class="js-consumption"></td>
</tr>
</table>
</div>
<div class="js-service-list-item>
<table>
<tr>
<td>Something</td>
<td><input type="text" class="js-consumption"></td>
</tr>
</table>
</div>
... and so on ...
</div>
I want to add an on-click event with jQuery to all the inputs so that when the users clicks on the input, all of the content of that specific input box would be selected. But I have no idea how to so all suggestions would be greatly appreciated, thanx :)

You can use delegate method for newly added or future elements
refrence
$('.js-item-list').delegate('input', 'click', function(e) {
//some code here
})
or for newer version >1.7 of jquery you should use .on()
As of jQuery 1.7, .delegate() has been superseded by the .on() method
$('.js-item-list').on('input', 'click', function(e) {
//some code here
})

Use the jQuery's event delegate function may resolve your problem, try this :
$(".js-item-list").on("click" , "input.js-consumption" , function(){
var domInput = this ;
var $input = $(this) ;
var value = $input.val();
// to do
});

You can use Jquery .on function, which work on dynamically added html element.
$(".js-item-list").on( "click", ".js-consumption" ,function() {
alert( $( this ).val() );
});
.js-item-list is the selector class which is not change dynamically only inner element of this will be change.

I'm assuming you have some button that the user clicks to add another "Something". I'm also assuming you have somewhere in your JS code $(".js-service-list-item").onclick(someAction).
That initial JS code only applies to the elements with that class that exist at the time it is run. This means every time they add an element to the list, you need to reapply that onclick method.
So what I would do is move that $(".js-service-list-item").onclick(someAction) code into the onclick function you have for the button that adds these service-list-items. That way each time you create a new element, you'll also register the onclick event with it

Display/Hide DIVs on tablecell hover (javascript)

I built a table with about 20 cells. Next to the table I want to display a <div> with a description, which should be displayed on hover or on click. There are heaps of solutions available on the web, but none really fits.
I already know I do need JavaScript, so i have my table cell
<td class="des1">Content</td>
and
<div id="des1">my Description1</div>
I add a class to the cells because some descriptions are called by more than one cell.
So, I need a JavaScript function to show the div "des1" on hover/click of all cells of class "des1", and also hide all other descriptions shown before. And that is my problem.
All my descriptions are wrapped in on other div so can I hide all divs in the wrapper and then display the right description. What is the best way to do this (event handling? inline?) Should I use CSS in Addition?
I do not have much experience in Javascript so I would appreciate any help or tips.

There are two basic parts to what you are trying to achieve:
event handling (to do things in response to the user hovering/clicking)
DOM manipulation (to change the description).
I would strongly advise using the jQuery library to help facilitate both of these.
Using jQuery you can easily "bind" an event handler which will do something in response to a cell being clicked or hovered over. For instance:
$('.des1').click(function() {
// Whatever you put here will be triggered when the user clicks on an element
// with class "des1"
});
The hover handler is similar, although slightly more complicated because it lets you specify both what happens when the user starts hovering and when they stop:
$('.des1').hover(function() {
// Whatever you put here will be triggered when the user hovers over an element
// with class "des1"
}, function() {
// Whatever you put here will be triggered when the user stops hovering over an
// element with class "des1"
});
Inside the handlers you'll want to add logic to modify the text of the element with the appropriate ID, which you can do using jQuery's text method:
$('#des1').text('My Description #1');
Combining the two, and sharing a function between them, you get something like:
var showDescription1 = function() {
// Whatever you put here will be triggered when the user clicks on an element
// with class "des1"
};
$('.des1').click(showDescription1)
$('.des1').hover(showDescription1, function() {
// if you want to change the description back when the user stops hovering, you'd
// add that logic here
});

<style>
div.des {
display: none;
}
</style>
<table>
<tr>
<td class="des1">Content 1</td>
</tr>
<tr>
<td class="des2">Content 2</td>
</tr>
<tr>
<td class="des3">Content 3</td>
</tr>
</table>
<div id="des1" class="des">Description 1</div>
<div id="des2" class="des">Description 2</div>
<div id="des3" class="des">Description 3</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('table td').on('click', function() {
var $des = $('#' + $(this).attr('class')),
visible = $des.hasClass('active');
$('div').hide();
if(visible) {
return;
}
$des
.addClass('active')
.show();
});
</script>

jQuery Multiple Selector with split

I have this row with two <td>'s with classes messageROW and titleROW following a checkbox with the ID of 'activecd'. I'm trying to change the bg color of both messageROW and titleROW (the whole row) when the checkbox is toggled but instead titleROW only changes colors.
Any suggestions?
$('[id^=activecd]').change(function(){
$('.messageROW,.titleROW'+$(this).prop('id').split('activecd')[1]).closest('td').toggleClass('colorcode', this);
});
HTML:
<tr>
<td class="messageROW"></td>
<td class="titleROW"></td>
<td><input id="activecd"></td>
</tr>

I'd suggest the following, albeit untested:
$('[id^=activecd]').change(function(){
$(this).closest('tr').toggleClass('colorcode', this.checked);
});
This listens for the change event on the specified element(s), finds the closest tr element and adds the colorcode class if the checkbox is checked, and removes the class if not.

Try jQuery $().add(selector), $().toggleClass("bgOn") with css
<style>
.bgOn {background:rgb(255,230,230)} // any css to toggle.
</style>
Not clear question, I think.
<button onclick="someFunction(this)">Toggle color</button>
function someFunction(this){
var $this=$(this);
$this.parent().find(".messageROW,.titleROW").toggleClass("bgOn");
// or
$this.parent().parent().find("tr>td:first-child, tr>td:nth-child(2)").toggleClass("bgOn");
}
might help you.

jquery moving rows dynamically with .on

I'm attempting to move rows between two tables, but I cannot get it to keep the click event bound to it. I'm confused on the selector part on the .on event I'm not sure what I'm supposed to be targeting with that.
Basically I can get it to move to one table, and back but then it losses the click property. Not sure why.
I've attached a fiddle(http://jsfiddle.net/Yjqkn/216/) to make the problem clearer. The approve button moves it down, and the waitlist button moves it back, but then it loses all event listeners do I need to rebind them with .bind What is the best way to solve this.
I tried : .on("click","button.remove-participant",function() didn't work
Javascript
$( ":button" ).on("click",function(){
if($(this).hasClass('remove-participant')) {
$(this).removeClass('remove-participant').addClass('add-participant');
$(this).html('Approve');
var current_row = $(this).closest('tr').html();
$('.table_2 > tbody:last').append('<tr>'+current_row+'</tr>');
$(this).closest('tr').remove();
$( ".table_2 .add-participant" ).bind( "click", function() {
$(this).removeClass('add-participant').addClass('remove-participant');
var current_row = $(this).closest('tr').html();
$(this).html('Waitlist');
$('.table_1 > tbody:last').append('<tr>'+current_row+'</tr>');
$(this).closest('tr').remove();
});
}
});
HTML
<table class="table_1">
<tr>
<th>Info Header 1</th><th>Info Header 2</th>
</tr>
<tbody>
<tr><td>Don</td>
<td><button class="remove-participant" name="">Remove</button></td>
</tr>
</tbody>
</table>
<table class="table_2">
<tr>
<th>Info Header 1</th><th>Info Header 2</th>
</tr>
<tbody>
<tr></tr>
</tbody>
</table>

You should use:
$(".table_1").on("click", "button.remove_participant", function() {
...
});
The general idea with event delegation is that you bind the handler to some element(s) that are static in the DOM and will contain all the dynamically added elements. Then the selector argument should specify the more specific dynamic elements that you want to delegate to.
It also doesn't look right that you're binding a click handler to .table_2 .add_participant within the button.remove_participant click handler. Every time you remove a participant, it's going to add another click handler to every .add_participant element, so when you click on those elements the handler will run multiple times. You should delegate the handler just once -- the whole point of delegation is that it picks up dynamic changes so you don't need to redo it every time you modify the DOM.
BTW,
.removeClass('class1').addClass('class2');
can be combined into:
toggleClass('class1 class2');

In my opinion your code is not working is because of your logic. You are here doing this: In table 1, you are removing the class.
$(this).removeClass('remove-participant').addClass('add-participant');
When you click on table 2, and do the same thing. But you never go back and add the remove-participant class in table 1. So the click in Table 1 doesnt not work because class is set to 'add-participant' and not changed back.