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.

Inject content into an injected div

Is it possible to inject the time into an input field that has just been injected? To clarify I am using CMB2 which is a WordPress library to create Custom Meta Boxes. I am using the repeating field field and this injects a div with a few fields. I want to use a button to add the current time to an input field.
I can do this if the post has been saved and the div is already in the DOM, but I cannot add the time to a newly created row/div.
Is it possible to add the time to a field that has been injected? If so, how? Any help would be appreciated.
I apologize if this does not make any sense. Its 1:40am and I cannot find the words to explain is too well.
This is how I get the time and add it to the input field.
(function($) {
var strDateTime = // bunch of code to get date...
$('.getTime').on('click', function(e) {
var $root = $(this);
e.preventDefault();
$root.parent().find('.note_timestamp').val(strDateTime);
});
}(jQuery));
This works fine if the div block has been saved and not newly injected, but if I click the add row button and the div is injected into the dom the getTime onclick event does not fire.

Because that handler gets added only once when the page first loads. You'd have to attach it to something that is on the page, and then filter it like so:
$('body').on('click', '.getTime', function(e) {
var $root = $(this);
e.preventDefault();
$root.parent().find('.note_timestamp').val(strDateTime);
});

Datatable link stops working after page one

I have a datatable with a data-href inside to create a link to a forum page, My issue lies in the place that my datatable link works great on page one, but when I go to page two I can no longer follow the link,but it still has all the data of a link when I inspect element.
My JS and Style for the link within the datatable
<style>
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background-color:#F0F8FF;}
</style>
<script>
jQuery(document).ready(function($) {
$(".clickable-row").on('click',$('.clickable-row'),function() {
window.document.location = $(this).data("href");
});
});
</script>
All rows are called upon by MySQL tables to populate the data and are pulled correctly.
echo "<tr class='clickable-row' data-href='viewPage.php?id=".inv_forum_page()."&forum=".$forum['id']."'>
<td>".$authorname."</td><td>".$posttype."".$forum['subject']."</td><td>".$forum['replies']."</td><td>".$forum['views']."</td>
</tr>";
I don't feel like posting the entire function as it's quite a bit of code when I don't believe it's the issue since it works on page one I believe it has to do with my Jquery, but if you want to look at the function itself it is on github under
https://github.com/Doxramos/Invontrol/blob/master/plugins/inv_forum/functions.php
line 75-123
I read on delegated events and I believe that that's scripted correctly, s I'm not sure what the issue is at this point.

use below code
your problem is called Event Delegation.
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.
<script>
jQuery(document).ready(function($) {
$(document).on('click','.clickable-row',function() {
window.document.location = $(this).data("href");
});
});
</script>
if you call click event every time new page call use below code.
<script>
jQuery(document).ready(function($) {
$(document).off('click').on('click','.clickable-row',function() {
window.document.location = $(this).data("href");
});
});
</script>

You have given class 'clickable-row' to tr. Instead of tr class name, try jQuery 'on' method on table class name. For example, assing class 'clickable-tbl' to table tag and modify jQuery code as follows:
$(".clickable-tbl").on('click',$('.clickable-row'),function() {
window.document.location = $(this).data("href");
});

Yii Cgridview $.fn.yiiGridView.getSelection function doesn't work right away

I have a cgridview on a yii application, and I have selectableRows set to only 1.
I have the following javascript to catch the click event and copy the id of the row into a texfield on the same view file (the id can't be shown on the gridview itself that's why I'm using getSelection).
$('#doctors-grid').on('click', 'table tbody tr', function()
{
var doctorID = $.fn.yiiGridView.getSelection('doctors-grid');
$('#doctorIDTextfield').val(doctorID);
});
The problem is that the id value is never copied into the textfield on the first click but instead you have to click a second time. Not to mention that when I start clicking many different rows the id values get wrong some times.
Can anyone help? Thank you for your time.

Idk why it doesn't work, but you can do it another way:
....
'rowHtmlOptionsExpression'=>'array("data-id"=>$data->id)',
....
in your grid options,then with js:
$('#doctors-grid').on('click', 'table tbody tr', function()
{
var doctorID = $(this).attr("data-id");
$('#doctorIDTextfield').val(doctorID);
});
This will work.

How to pass dynamic values to event listener

I am using a server side technology (JSP) to render my views. Therefore I have a for loop that loops through a list. Now, I want to bind a click listener to a button that is rendered for each item in the list. The code in the click listener needs the item ID, which I don't understand how to pass to the JavaScript code.
I also use requirejs, if that matter to the solution.

Maybe you just don't need to pass the html ID to your javascript. You can use a css class to retrieve your buttons in your DOM. The javascript code depends of what framework you use.
In native javascript, you can retrieve your buttons like this :
var buttons = document.querySelectorAll('button.my_class');
Just replace my_class by what you want.
You can access a button id by doing this :
var button_id = buttons[0].id
If you want to attach the item id to the button, you can use a data attribute. For example :
<button id="my_button" data-id="item_id" />
In the javascript, you can access to data_id like this :
var item_id = buttons[0].getAttribute('data-id');

In most event handlers, this is the DOM node that triggered the event, so something like this works:
button.onclick = function() {
alert(this.id);
}

Here is the live example
If you were using jQuery and requirejs this would be like this:
require(['jQuery'], function ($) {
$('.container_element').on('click', '.button_class', function () {
console.log('You have clicked button with id ', $(this).attr('id'));
})
})