How to get element Id from dynamically generated form elements with jquery?
A simple change:
$(document).ready(function() {
$('input').live("focus", function() {
var currentId = $(this).attr('id');
$("#"+currentId).val('blah');
});
});
.focus
only binds to elements that exist at the time it's called. .live()
binds a function to an event for all existing elements, and any that are added to the DOM later.
Get dynamically generated ids with jQuery and Javascript
An alternative is using Event Delegation for dynamically created elements.
Another approach is the feature data-attributes
along with the function $data
which stores useful information, in this case, the current id
of the created element.
Additionally, this approach uses the CSS class inputs
to identify the textfields and bind the event input
to execute the function updateCount
for any changes on those textfields.
function updateCount() { var identifier = $(this).data('identifier'); //'data attribute' along with function 'data'. $('#countHeadline1' + identifier).text($(this).val().length); $('#headlineText1' + identifier).text($(this).val());}
var c = 1;$('#add').on('click', function() { c += 1; $('#parent').append('<br><br><br>Headline ' + c + ':<br /><INPUT TYPE="text" class="inputs" data-identifier="' + c + '" placeholder="Headline" id="headline1' + c + '" maxlength="30" style="width: 350px;float:left;min-height: 32px;"/><span id="countHeadline1' + c + '" class="adCounter" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;">0</span><br><span id="headlineText1' + c + '" class="headLine" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;">0</span>');});
$('#parent').on('input', '.inputs', updateCount); // Event delegation
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id='parent'> Headline 1: <br> <INPUT class='inputs' TYPE="text" data-identifier='1' placeholder="Headline" id="headline11" maxlength="30" style="width: 350px;float:left;min-height: 32px;" /> <span id="countHeadline11" class="adCounter" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;"> 0 </span><br> <span id="headlineText11" class="headLine" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;"> 0 </span></div><br><button id='add'>Add</button>
how can i get id/ generate id of dynamically generated elements in html using jquery?
You are using .clone method, add thats copy everything...
You can modify the id where are using that methor, something like this:
$(document).ready(function () {
$('.studentprofileupdateBody a').click(function () {
console.log('ok');
var $tr = $(this).closest('tr').prev();
var clone = $tr.clone().attr("id","new-id");
$tr.after(clone);
});
});
EDIT: To have dynamic id for each row('input' and 'tr'), you can do this:
$(document).ready(function () {
var dynamicId, inputName, numberEachType;
$('.studentprofileupdateBody a').click(function () {
console.log('ok');
var $tr = $(this).closest('tr').prev();
numberEachType = $('table#tblEducation tr[name="'+$tr.attr('name')+'"]').length;
dynamicId = $tr.attr('name') + numberEachType;
var clone = $tr.clone().attr('id',dynamicId); //dynamic ID at <tr>
inputName = clone.find('input').attr('name');
dynamicId = inputName.substring(0,inputName.length-1) + (numberEachType+1);
clone.find('input').attr('id',dynamicId).attr('name',dynamicId).attr('title',dynamicId.toUpperCase()); //dynamic ID, Name and title at <input>
$tr.after(clone);
});
});
Try an example here http://jsfiddle.net/expertCode/NT4Zr/ and see the source code, if it's this what you want.
get id and value dynamically created element jquery
use
$(document).on('click','.chb',function(){
var id = $(".non-skin-symptom-choice").attr("id");
})
as this have a high level event attachment and it can get the elements who have been created on a runtime
Getting id of dynamically created element jQuery
LIVE DEMO
$("#textBoxContainer").on('input','#date', function () {
$('#endpoint').html(this.value);
});
Read the docs about the .on()
method and event delegation for dynamically generated elements
jquery get id value from dynamically created div
You should use input instead of div:
Try this:
Html :
<input type="text" id="tag<%=count++%>" value="val1"/>
<input type="text" id="tag<%=count++%>" value="val2"/>
<input type="text" id="tag<%=count++%>" value="val3"/>
Jquery:
$( document ).ready(function() {
$('input[id^="tag"]').on('click', function() {
alert(this.value);
});
});
Live demo
using div:
try this:
$( document ).ready(function() {
$('div[id^="tag"]').on('click', function() {
alert($(this).attr('value'));
});
});
demo
How to access a dynamically generated id in jquery
Couldn't you get all nodes with the .challengee
class? And then accessing them with the id. For example:
var $challengees = Array.from($('ul > .challengee'))
var ids = $challengees.map(challengee => $(challengee).attr('id'))
Would give your an array containing all of the IDs.
DemoEdit: if what you want is to get that id on an event, it doesn't matter how it generated. You could do:
$challengees.on('focus', function() {
console.log(this.id)
})
Demo Get ID of the dynamically generated button
I see you've already found an answer, but I just wanted to throw in my two cents for future/others reference.
First, I hope you're doing some iota of sanitation and not just dropping the clients $_POST
right into your query. Here are the first three google results on that.
Second, your code is kind of tough to read. I would recommend using double quotes "
for all strings in php, and escaping them \"
when needed in a string. Just simplifies and standardizes everything. This may have been where your original problem came from as well.
'<button id="check'.$row["pres_id"].'" class="btn btn-danger custom-badge status-grey" value="Submit" data-id='.$row['pres_id'].' onclick="alert(this.id)"> Submit </button>'
Assuming $row["pres_id"] = 123
, it would render as
<button id="check123" class="btn btn-danger custom-badge status-grey" value="Submit" data-id=123 onclick="alert(this.id)"> Submit </button>
Notice that it's missing double quotes for the data-id
value. Using double quotes, you can just drop an array value into a string by surrounding it with {}
. So your code would simplify to
"<button id=\"check{$row["pres_id"]}\" class=\"btn btn-danger custom-badge status-grey\" value=\"Submit\" data-id=\"{$row["pres_id"]}\" onclick=\"alert(this.id)\"> Submit </button>"
I guess my IDE does it slightly more justice with the color scheme, but either way, I think it's slightly more readable and helps prevent missing escaping charters or leaving them out entirely. Also, with double quotes, you can drop a variable into a string and it will just parse it correctly, no string concatenation required!
Say $id = $row["pres_id"]
, now you can just
"<button id=\"check$id\" class=\"btn btn-danger custom-badge status-grey\" value=\"Submit\" data-id=\"$id\" onclick=\"alert(this.id)\"> Submit </button>"
Here's a slightly better read on the nuances of php strings.
jQuery: How to get ID of dynamically generated element?
The parent('tr')
returns only the direct parent. To be a direct child of a <tr>
, the this
should be a <td>
. But the .linkQuantite
seems to be an <a>
element. This is definitely not a direct child of <tr>
. You would rather like to use parents('tr')
or better closest('tr')
for this. The key difference is that parents('tr')
returns all parents matching 'tr'
while closest('tr')
returns only the first parent matchnig 'tr'
.
Related Topics
Replace All Chars With #, Except for Last 4
How to Increment the Elements of an Array by a Desired Value in JavaScript
Reactjs, Table Cell With Different Background Color
Push Objects into an Array in Reactjs
Onchange Event Not Fire When the Change Come from Another Function
Expected Corresponding Jsx Closing Tag for Input Reactjs
How to Simulate Mouse Click Along With Mouse Move Using JavaScript
How to Scroll Left or Right Inside a Div Using Pure JavaScript Function and No Jquery
How to Display an Image in Two Pages in Pdf Using Jspdf
Number Value Format With Comma and Two Decimal Points
Jquery - Get Id Dynamically from Generated Element
How to Redirect to Another Component Onsubmit Search
Force Facebook to Open Link in External Browser for Smart Phones
How to Unmute Html5 Video With a Muted Prop
How to Trigger a Jquery Function Only Once in One Page, Per Session
How to Get Convert an Object to HTML Markup
How to Determine Server Disconnection from Signalr Client
Get Image from Json File Using JavaScript and Display in HTML Img Tag