Develop Reference

Jquery .Each function not working properly

I want to add a column to my table. My js code is as follows:
jQuery(document).ready(function () {
jQuery('#addCol').click(function () {
var countRows = $('#blacklistgrid tr').length;
$('.class').each(function() {
$( this ).append("<td><input type=\"text\"/></td>");
});
});
This code can be found in the fiddle. What am I doing wrong ?

You're targeting the wrong element.
You should do this:
jQuery('.Row').each(function() {
jQuery( this ).append("<td><input type=\"text\"/></td>");
});
Notice jQuery('.Row') instead of jQuery('.class')
See the docs, the class selector is used like jQuery('.<classname>'), and in this case you want to get each rows, which are identified by Row class

Moving elements from a list to another list with JQuery

I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.

$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});

Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});

how to append html to the variable?

i have this kind of structure...
<div class="copy_from">
<img src="images/1.png" />
</div>
<button class="copy_button">Copy</button>
<div class="copy_to">
</div>
i want to add the content of the copy_from div to copy_to div with an additional button "Add to Cart".
i am trying this...but it is not working...
<script type="text/javascript">
$(document).ready(function () {
$('.copy_button').click(function () {
var one1 = $('.copy_from').html();
var two = $(one1).append('<button>Add to Cart</button>');
$('.copy_to').html(one1);
});
});
</script>

Try
$('.copy_button').click(function () {
var one1 = $('.copy_from').html() + '<button>Add to cart</button>';
$('.copy_to').html(one1);
});
Or you could try changing this line
$('.copy_to').html(one1);
to ->
$('.copy_to').prepend(one1);

You've just got the order of things a bit mixed up. You make a copy of the html from .copy_from and then you add the button, afterwards. You can simply add the button to .copy_to afterward instead...
$(document).ready(function () {
$('.copy_button').click(function () {
var one1 = $('.copy_from').html();
$('.copy_to').html(one1).append('<button>Add to Cart</button>');
});
});

Jquery on php in div box not working

I have an main php that load a php into a div box via a dropdown list.
The loaded php contains a table. There is jquery in it that does an alert on row clicked.
$(document).ready(function() {
$('#newsTable tr').click(function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
But after it is loaded into the div, the script is not firing

use Event delegation to attach event. Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function() {
$(document).on('click','#newsTable tr',function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
}); // End

There is something with event delegation. Try using this code :
$('id_Or_Class_container_hold_the_php_data').on('click', 'tr', function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});

replace
(document).ready(function() {
with
$(document).ready(function() {

try this
jQuery(document).ready(function($) {
$('#newsTable tr').click(function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});

I think you need to use live query, instead of your click event u can use following.
$('#newsTable tr').on('click',function()

Use below code..i think its working properly.
$(document).ready(function() {
$("#newsTable").on('click','tr',function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});

Jquery append input element and send data from that input element

I have this simple HTML code:
<div id="new_gallery">
<p id="add_gallery">Add new gallery</p>
</div>
and jQuery code:
<script>
$("#add_gallery").click(function() {
$("#new_gallery").append('<input name"new_gallery" />Add');
$(this).remove();
});
$("#create_new_gallery").on('click', function(){
alert('1');
});
</script>
First function is working, but second one is not. I need to create new input element, send data via ajax, and then delete the input element and append a p element once again. How can I do this?

When the second statement runs, the element #create_new_gallery does not exist yet so it does nothing.
You can do the binding to the click event after you created the element for instance, this ensures the element exists in the DOM:
$("#add_gallery").click(function() {
$("#new_gallery").append('<input name="new_gallery" />Add');
$(this).remove();
$("#create_new_gallery").on('click', function() {
alert('1');
});
});​
DEMO
Here is a little bit more optimized version. It's a bit non-sense to append an element and have to re-query for it (event though querying by id is the fastest method. Besides, it's best to use the chaining capabilities of jQuery afterall:
$("#add_gallery").click(function() {
var $gallery = $("#new_gallery");
$('<input name="new_gallery" />').appendTo($gallery);
$('Add')
.on('click', function() {
alert('1');
})
.appendTo($gallery);
$(this).remove();
});​
DEMO

#create_new_gallery doesn't exist when you bind its click event.
Here is what your code should look like:
$("#add_gallery").click(function() {
var newG = $("#new_gallery");
$('<input name"new_gallery" />').appendTo(newG);
$('Add').appendTo(newG).on('click',
function() {
alert('1');
});
$(this).remove();
});
Notice that getting $("#new_gallery") into a variable avoid to look for it twice.

$(document).ready(function () {
$("#add_gallery").click(function() {
$("#new_gallery").append('<input name"new_gallery" />Add');
$(this).remove();
$("#create_new_gallery").on('click', function(){
alert('1');
});
});
});
DEMO: http://jsfiddle.net/39E4s/2/
​

Try live to handle the events fired for elements added after the page has loaded.
$("#create_new_gallery").live('click', function(){
alert('1');
});
http://api.jquery.com/live/