Jquery - Get Id Dynamically from Generated Element

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.

Demo

Edit: 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



Leave a reply



Submit