We Keep Coding

jQuery $.change function not working with cloned select

I have a table with a button that adds a row to the bottom by cloning the last row. Each row contains a <select> with a different name (0-9), all <select> objects have the .variable_priority class. When pressing the button, the row gets copied successfully and I manage to change the name correctly (10, 11, 12, etc.), and the row gets the same class since it is a perfect copy.
However, when I execute the following function, I encounter problems with cloned table rows:
$('.variable_priority').change(function() {
var selections = new Array();
$(".variable_priority").each(function() {
selections.push($(this).find('option:selected').val());
});
// Iterating on Options of Select
$('.variable_priority').children('option').each(function() {
$(this).removeAttr('disabled');
if($.inArray($(this).val(), selections) !== -1){
if($(this).val() != 0){
if($(this).is(':selected')){
// nothing
} else {
$(this).attr('disabled', true);
}
}
}
});
});
The function should run each time I change the selected option of a <select>, though it only runs with the 10 original ones. This function is not executed when I change the option in a cloned row. However, if I change the value in one of the originals, the function runs and it also adds the values from the cloned rows to the selections array.
So for some reason, the code recognizes that the clones have the same class, but it doesn't run when changing their values.
EDIT: short description of the code above; if I change the selected value of a <select>,the function will add all selected options to an array and disable every selected option in the selects, except in the box where the value itself is selected (if I select '2' in the first box, '2' gets disabled in all other boxes).

Because your select element is dynamic (It is added to the DOM after the initial page load, or to be specific; after the initial event handler attachment) you will need to delegate your change event handler:
$(document).on('change', '.variable_priority', function() {
});
Rather than use document though, you'll want to attach the event handler to the closest static element to .variable_priority.
JSFiddle

I think the code isn't executed on the new clones.
This script is loaded on start. It has to do it over for each new children.. Maybe after adding a new, run this script specific for that new one.

Editable table (remove text and add text field on click) fires too many times

So I have this table that I want to make editable. In order to do so, I have a simple event listener that removes the text from the td element and appends a input field with that text as the value. The value of that text field is then appended to the td once the text field loses focus.
The problem is it fires when the user, for example, tries to highlight and delete the text (click).
I changed the selector to exclude the specific input field's class, but to no avail.
Javascript:
$(function() {
$('.text_field:not(.remove_text)').click(function() {
var text = $(this).text().trim(),
length = text.length;
$(this).empty()
.append("<input type='text' class='remove_text' size='"+length+"' value='"+text+"' />")
.find('.remove_text')
.focusout(function() {
$(this).closest('td').empty().append($(this).val());
})
.focus();
});
});
Here is a fiddle to show what I mean.
Is there something wrong with the selector or something?

An easy solution would be to add some logic to prevent emptying the table cell if it already contains an input element.
$('.text_field:not(.remove_text)').click(function() {
if( $(this).find('input').length > 0 ) {
return;
}
// your existing code
}
Here is a working example JS Fiddle

The selector is only used once for attaching the event listener. If you want to check the condition every time, it might be better to put it inside the handler:
$('.text_field').click(function(e) {
if ($(e.target).is(".remove_text") || $(e.target).closest(".remove_text").length > 0) return;
//Otherwise, execute code
});
Fiddle Here: http://jsfiddle.net/5uxf6yy7/3/

Click on table row except first cell

I have a html table in which rows and columns are adding dynamically.
Create dynamic row
var row = tableHolder.insertRow(0);
row.id = "row_0";
Create a cell
var cell = row.insertCell(0);
cell.id = "cell_0"
Now I need to attach a click event on the dynamically created row.
row.addEventListener('click', function(evnt) {
openPopup();
}, false);
A popup will open on click on the row.
Now I want when user click on first cell of every row, click event should not be fired and popup will not open.

You can use :gt selector in jquery to add click event on other rows.
Checkout the following link :
http://api.jquery.com/gt-selector/

If you have a table with id="mytable" then you can use jQuery's on() method to listen for events on the table which occur on any cell except the first one in each row. The reason for binding to the table is so that dynamicly created rows will still trigger the event (since the event will bubble up to the table).
// Listen for click event on anything but first cell in each row within #mytable
$('#mytable').on('click', 'td:gt(0)', function() {
alert('Got click on anything but the first cell');
});
// Dynamically create row for demonstration
$('#mytable').append('<tr><td>Cell 1</td><td>Cell 2</td></tr>');
Here's a fiddle: jsfiddle
Click on cell 1 and you will find no event fired, click on the second cell and the alert will appear.

Try this JQuery Solution
$('table tr td:not(:first-child)').click(function () {
openPopup();
});

Action on clicking out of a form, inside a table

To start here is the fiddle with all the relevant code: http://jsfiddle.net/baruck/43787/
I'm building a webapp that at some point the user needs to register a number of items.
It is a big form, and this section of the form is inside a table.
Each input tag is inside a td followed by a span. When the user clicks to edit a certain row a script hides the span (that holds the value of the input) and shows up the input. When the user click on another row (or creates a new one) the script picks the value of the input add it/change the span text and hides the input and shows up the span.
When user clicks on some row, it first selects the row adding the 'editing' class to it, and the second click put the focus on the input.
While I'm clicking inside the table all goes well; the problem is when I click outside of the table that contains the inputs or hit tab after the last input on the active row. The focus go somewhere else...
When one of those two action happens I want to 'deactivate the row', meaning pick up the values from the inputs on that row, add/change them in the span, hide the input and show the span.
Summary: need to fire this function when clicking outside of the table with a class of 'editable' or when 'tab away' on the last input of row...
function deactivateRows() {
//Deactivate editing on the rows
$('table.editable tr.editing').removeClass('editing');
$('table.editable').find('td').not('.delete').each(function () {
$(this).find('input').each(function () {
var inputContent = $(this).val();
$(this).prop('disabled', true).addClass('hide').attr('value', inputContent);
$(this).parent().find('span').html(inputContent).removeClass('hide');
});
});
}

I think the trick will be to traverse up the DOM from a clicked element, or the related element of a blur event, and see if you hit table.editable. Something like this:
var isInsideEditable = function (el) {
return !!el && $(el).closest('table.editable').length > 0;
};
$('select, input, textarea', '.editable').on('blur', function (e) {
if (!isInsideEditable(e.relatedTarget))
deactivateRows();
});
$(window).on('click', function (e) {
if (!isInsideEditable(e.target))
deactivateRows();
return false;
});

row selection on row click but not on hyperlink click in one of the column in jquery datatable?

i have my customer dataTable which has five columns. one column contains hyperlink. One of the column is checkbox.
i want when user clicks on the row, that row should be selected(which means row color should change and checkbox
should be selected). i can do it with below code snippet
$("#customer").on('click', $.fn.getDataTablesClickHandler("#selectAll"));
//where customer is the html div associated with dataTable and call the same function which gets triggered
//on call of selectAll html element. Inside that function i toggle the class of row
It works great. But my problem is i dont want this to happen(i.e row seection) on click of link inside one of the column.
how i can do this?So basically how can i restrict firing getDataTablesClickHandler on click of certain link in a cell or
on click on cell?

Try this out, you want to check out which target is being clicked, and ignore it if it's an anchor tag.
$("#customer").on('click', function(event) {
if(event.target.tagName == 'A')
return;
$.fn.getDataTablesClickHandler("#selectAll").apply(this);
});

You could do something like this:
if customer is your table;
$("#customer").on('click', 'tr', function(){
if( !$(this).is('tr') )
return;
$.fn.getDataTablesClickHandler("#selectAll");
});