57147

Jquery get id or class from dynamic element

Question:

Let say I have 5 element from <em>PHP query</em> (so it is dynamic) Illustrated below:

element 1 class=element id=id_1 element 2 class=element id=id_2 element 3 class=element id=id_3 element 4 class=element id=id_4 element 5 class=element id=id_5

We ussulay use <em>jquery event</em> by knowing their <em>class</em> or <em>id</em>, but in this case, we don't know exactly their <em>id</em>.

$("#id_3").click(function() { //in this case we have known we want to add event when we click id_3 });

How to deal with dynamic element from <em>PHP query</em>?<br /> For example, how can we know that we click on element 3 with id_3?<br /> What must we fill in $(????).click();?<br /> When I use class, how can I know which <em>id</em> I reference from the class clicked?

Answer1:

In your example the elements all have the same class, so you can setup your event handler based on that:

$(".element").click(function() { // "this" refers to the clicked element // this.id will be the id of the clicked element });

Or if these elements are dynamic in the sense of being loaded via Ajax at some point after the initial page load use a delegated event handler:

$("somecontainerelement").on("click", ".element", function() { // do something with this.id });

Where "somecontainerelement" would ideally be the element that the dynamic elements are added to, but could just be document.

Answer2:

This was the only way I could get it to work. For example, if you wanted to get the attribute ID or the value of the element that has been clicked...

$("containerElem").on("click", "someElemID", function(evt) { var getElemID = $(evt.target).attr("id"); var getVal = $(evt.target).val(); });

Answer3:

If they all have the same class, then you can use a class selector. Then use this to find whatever property you are after.

$('.element').click( $(this).prop('id'); );

Answer4:

If you want to add a click only then why not add that to the generated html on server side?

Answer5:

You can use <a href="http://api.jquery.com/attribute-starts-with-selector/" rel="nofollow">attribute starsWith</a> selector & <a href="http://api.jquery.com/on/" rel="nofollow">on</a> to bind events on dynamically created elements.

$('body').on('click', '[id^=id]', function(e){ });

Answer6:

This is veryusefull when we work on unknown elements with id or class

$( document ).ready(function() { // user this if element is div $('div[id^="id_"]').on('click', function() { alert($(this).attr('id')); }); // user this if element is input $('input[id^="id_"]').on('click', function() { alert(this.id); }); });

Recommend

  • Entity Framework, how to manually produce inner joins with LinQ to entitites
  • WinForm event subscription to another class
  • How to implement a callback method within DLL (Delphi / TJVPluginManager + TJvPlugin)
  • implementing euclidean distance based formula using numpy
  • How to install PyGObject through PyCharm
  • How to scroll the horizontal scrollbar in an iFrame from the parent frame?
  • exception thrown while building the java application using netbeans
  • import cv2 doesn't give error on command-Prompt but error on IDLE on Windows 10, Python 3.6.4
  • Preventing Internet-accessing-method from delaying a toast popup
  • How to pass a bitfield (by reference) to a function?
  • Qt fresh Gui application crashes on startup, faulting at QtCore4.dll
  • Java: How to refer to subclass's static variable in abstract class?
  • Use Perl to Add GIF Image Other Than 8-bit to PDF
  • Difference between assigning instantiation to parent class and derived class
  • Application backgrounding in Xamarin.Mac
  • Find string between two substrings AND between string and the end of file
  • Redmine can't generate secret token
  • Get an image from the video
  • How to print every 4th column up to nth column and from (n+1)th column to last using awk?
  • Laravel 5.7: Custom blade template for Maintenance Mode but not 503.blade.php
  • Gitlab: copy project to other git lab repository
  • Complex multiple if statements
  • Battery life if using GPS and background app ios/android
  • Unable to connect to Azure MySQL Database through Azure Function - C#
  • Load php page results into div with ajax with link?
  • Modifying native query cannot have named parameter bindings?
  • How to display converted time zones in a 'generic week' (Sunday thru Saturday)?
  • Use AutoIt with java applications
  • Set SelectedIndex of ListView in FlipView_SelectionChanged event
  • Regex not working in java 1.5
  • Java .policy file - how to prevent java.util.Date() from being accessible
  • How can i move Clearcase dyamic/snapshot views to another host (Linux)
  • Rotating Towards Path in OpenGL
  • Google Spreadsheet Script to Blink a range of Cells
  • Conflicting declaration using constexpr and auto in C++11
  • How to integrate angular2-material (alpha 8.2) with angular2-Quickstart app
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Spring Boot fails to start
  • Comma decimal separator is ignored by ASP.NET MVC model binder
  • Running R's aov() mixed effects model from Python using rpy2