Develop Reference

How to go through array with dynamically added elements with jquery?

I have a HTML table created with javascript where i have possibility to add new rows (dynamically added elements). In one of the tds i have an input field that fires a bootstrap modal to open. In the modal I have radiobuttons with options and when OK button is clicked the value from the radiobutton is set in the inputfield. The problem is that the value gets updated on every row, not just the row i clicked.
Since the elements are added dynamically i used
$(document).on('click', 'input', function (e) {
doSomething();
});
Any idea how to solve this problem?
Updated with more code
$(document).on('click', 'input', function (e) {
var inputForm = e.target;
modal.modal({show:true});
modal.find(".btn-success").click(function () {
var choice = $("modal").find('input[type=radio]:checked').val();
if (choice) {
modal.modal('hide');
inputForm.value = choice;
}
});
});

Without any furter information about the code you are running it's hard to help you.
But, you might be able to use the target property of the event (e), to look at what element actually triggered the click, to be able to see which row/textbox to update when the modal is closed.

After reloading the datatable unable to select the checkbox

I have data table and by making an AJAX req am reloading the new contents of the table.On successful AJAX after the table gets reloaded am unable to select check-boxes in the data table.Since i have multiple check-boxes i use class selector to select the rows in the table. My select event is present inside document.ready. Where am missing??
Thanks

Please try below code:
$(function(){
$('#dataTableId').on('click','.cmpny_id',function(){
alert("hi"); var isChecked = $('.cmpny_id').is(':checked');
});
});
Change the dataTableId as per your table id.

$(document.body).on('click', '.cmpny_id', function(event) {
var isChecked = $('.cmpny_id').is(':checked');
});
this worked for me:)

Passing the row id on select to the JavaScript file in java

http://holt59.github.io/datatable/
I have used the this link for filtration and pagination of my table. Earlier i was using the
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
JavaScript code for selecting the row and getting the id , now its not working when i included the js file. please help me to get the dynamic selection of rows.

It is probably destroying and re-adding the rows which removes your event handler. Use event delegation.
$(document).on("click", 'tr[data-href]', function() {
document.location = $(this).data('href');
});
You can move the listening location closer to the row
$("#tableId").on("click", "tr...

Jquery lag on click function

I've got a table with different columns identified with different classes.
I've also a checkbox binded to every column.
I created a function which is called on the click of any checkbox. In this function I hide/show the column which is linked to this.
It doesn't have any javascript error, and the code is the following:
$(document).ready(function(){
$('ul input').click(function(){
//alert('yooo');
if ($(this).is(':checked')) {
//alert('checked');
$("td."+replaceAll(" ","_",$(this).val())).show();
$("th."+replaceAll(" ","_",$(this).val())).show();
//alert($("td").length);
}
else{
//alert('unselected');
$("td."+replaceAll(" ","_",$(this).val())).hide();
$("th."+replaceAll(" ","_",$(this).val())).hide();
}
});
});
However, after every click, the action has a lag (after many clicks it becomes tooooooo slow, many seconds).
I tried also with .css instead of hide-show, but it doesn't make any change.

I understood that the problem was linked only to checkbox, not on callback or on jquery function. I solved the problem simply by working with radio input, adding a "true" and a "false" radio input for every checkbox that was in the page.

Instead of running the jQuery selector on every click like below:
$("td."+replaceAll(" ","_",$(this).val()))
You could set up some sort of caching like:
var cache = {} //<-- declare this outside your click handler
//add the code below inside your click handler
className = replaceAll(" ","_",$(this).val())
if(!cache[className])
cache[className ] = $("td."+className + ", th."+className); //select all the elements once and store in the cache object
$el = cache[className];
if ($(this).is(':checked'))
$el.show();
else
$el.hide();

Paging and double click with jQuery datatable

After lots of reading posts and fiddling, I thought this was working to attach a doubleclick 'handler' to each row of my jQuery datatable:
$('#myTable').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
someThingToDoWithTextFromFirstCell(ref);
});
Unfortunately, this only seems to work for rows on the first page. I tried doing something like this as a workaround (basically do the same thing when paging):
$('#myTable').on('page', function () {
$('#myTable').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
someThingToDoWithTextFromFirstCell(ref);
});
} );
However, when it fires there are no tr's found so nothing happens. I assume the event is firing before the datatable has new rows?
Does anyone know how I can get this to work?
Here is a JS Fiddle example, Nikola. Thanks for your time. Double click a row and get an alert, click next and double click a row and get no alert.
JS Fiddle example
This is what you can add in for the workaround that doesn't work:
$('#example').on('page', function () {
$('#example').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
alert(ref);
});
} );

You could find answer here.
So, for dynamically created elements you should use:
$(document).on("dblclick", "#myTable tr", function () {
//code here
});