1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:08 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Dynamic JQuery Objects Calling to Function

Dynamic JQuery Objects Calling to Functio

         

ZakAltF4

5:14 pm on Jan 13, 2012 (gmt 0)

10+ Year Member



Hello All,

I have a, what may be simple for someone out there, question ... I have a JQuery script that is dynamically creating elements on a page. Well I have a function ... Lets say: 


<script>
$("#Go").click(function() {
alert ('!');
});
</script>


I have the following dynamically created objects: 

<a href="#" id="Go">Click 1</a>
<a href="#" id="Go">Click 2</a>
<a href="#" id="Go">Click 3</a>


Now here is the tricky part for me. In JavaScript I would have just assigned each *a* tag like such and called the function accordingly: 


<script>
function CallAlert(id){
 alert ('ID is ' + id);
}
</script>

<a href="#" OnClick"CallAlert(1)">Click 1</a>
<a href="#" OnClick"CallAlert(2)>Click 2</a>
<a href="#" OnClick"CallAlert(3)>Click 3</a>


With Javascript I can pass the 1, 2 and 3 to the function via identifiers ... I know there must be a way to do this with JQuery?

If you can mimic the JavaScript I created with JQuery it would be greatly appreciated. I know I am missing something simple, I just don't know what ... Thanks!

-- Zak

Fotiman

6:18 pm on Jan 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The first problem I see is that you have duplicate id values of "Go". ID's must be unique. You might change those to be classes:

<a href="#" class="Go">Click 1</a>
<a href="#" class="Go">Click 2</a>
<a href="#" class="Go">Click 3</a>

You then have a couple of options regarding how you pass the data. You could make use of HTML5's data- attributes. For example:

<a href="#" class="Go" data-value="1">Click 1</a>
<a href="#" class="Go" data-value="2">Click 2</a>
<a href="#" class="Go" data-value="3">Click 3</a>

Then modify your JavaScript like so:

<script>
$(".Go").click(function() {
alert(this.getAttribute("data-value"));
});
</script>

Note, this is the context of the element that the click handler is attached to.

Finished result would be something like this: 


<!doctype html>
<html>
<head>
<title>data- attribute test</title>
</head>
<body>
<div>
<a href="#" class="Go" data-value="1">Click 1</a>
<a href="#" class="Go" data-value="2">Click 2</a>
<a href="#" class="Go" data-value="3">Click 3</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(".Go").click(function() {
  alert(this.getAttribute("data-value"));
});
</script>
</body>
</html>

Fotiman

6:22 pm on Jan 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Also, welcome to WebmasterWorld! :)

lexipixel

4:53 am on Jan 15, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In one Jquery script where I dynamically create items, I keep a counter of the total number of each type of item, then increment the id so each clickable item has a unique id.

Since my application involves draggable items, this also lets me easily keep track of x,y coordinates, total count, and easily delete a specific dynamicly created item.

In the code below, if "ttlXbox" equaled 7 before the function was called, it would create a new item with the id "xbox8"

============================================

$("#addXboxButton").click (
function() {
ttlXbox++;
var top = $('#addXboxButton').position().top;
var left = $('#addXboxButton').position().left;
$('<div id="xbox' + ttlXbox + '" class="xbox" class="ui-widget-content" style="position: absolute; margin: 0px; top: '+top+'px; left: '+left+'px;"></div>').draggable().appendTo('.viewPort');
}
);

==============================================

(I left the extra junk regarding style and position in the code thinking it might be useful -- if you need a cleaner example, let me know).

ZakAltF4

3:45 pm on Jan 16, 2012 (gmt 0)

10+ Year Member



Thanks for the welcome! I'll explain more in detail what I have going and display some of my actual code so it's easier to see...

From this: 


<p><a href="#" onClick="addFormIm(); return false;" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#6633FF;">Add Image</a></p>


I am calling: 


var iid=0;
function addFormIm() {
iid = iid + 1;
$("#divIm").append("<div id='irow" + iid + "'><img src=\"del.png\" style=\"vertical-align:middle;\" onClick='removeFormIm(\"#irow" + iid + "\",\"" + iid + "\"); return false;'>&nbsp;&nbsp&nbsp;&nbsp<a href=\"#\" onClick\"(Upload(" + id + "))\";>Upload Image</a><br><hr width=\"400\"><br></div>");
$("#containment-wrapper").append('<div id=\"AdIm' + iid + '\" style=\"width: 100px; height:100px; border:2px solid #ccc;\"><span id="mestatus' + iid + '" ></span><div id="files' + iid + '"><li class="success' + iid + '"></li></div></div></div>');
$( "#AdIm" + iid ).draggable({ containment: "#containment-wrapper", scroll: true });

$('#irow' + iid).highlightFade({
speed:1000
});
document.getElementById("iid").value = iid;
}
function removeFormIm(Riid,iid) {
 
$(Riid).remove();
var d = document.getElementById('containment-wrapper');
 var olddiv = document.getElementById('AdIm' + iid);
d.removeChild(olddiv);
}


Creating these: 

<div id='X'><img src="del.png" style="vertical-align:middle;" onClick='removeFormIm("#irowX","X"); return false;'>&nbsp;&nbsp&nbsp;&nbsp<a href="#" onClick"Upload(X)";>Upload Image</a><br><hr width="400"><br></div>


Calling Upload: 


<script>
$(function Upload(id){
alert ('Image ID is ' + id + '!');


});
</script>



.... Everything works perfect, except for passing the ID to the upload function ... And when I check the CSS, the ID's are assigned properly. I just can't get them passed to the "Upload" function.

-- Zak

ZakAltF4

4:23 pm on Jan 16, 2012 (gmt 0)

10+ Year Member



AKKK! For those of you who can't see the forest through the trees ...

CHECK YOUR CODE 

onClick\"(Upload(" + id + "))\";


This was my issue ... That extra set of parentheses combined with the wrong ID creation, there is no id .. Only iid .. This works: 

onClick\"Upload(" + iid + ");\"


I believe that occurred during a copy paste ... lol .. I am sorry to take up your time for a stupid mistake!

-- Zak

lexipixel

7:40 pm on Jan 16, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



We've all been there. Many of the most frustrating errors (in Javascript and other scripting and programming languages) can be attributed to:

quote marks - mismatched, or improperly nested, or improper use of single or double quotes.

semicolons - and other end of statement or end of line terminators

parenthesis or brackets - mismatched, improperly nested or wrong type used

0's or 1's - not understanding if the counting, increment or iteration of a value was zero based or one based.

typos - e.g.- typing 'id' as a var name when we meant 'iid'.

Maybe others will add to this list of common coding errors.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:08 pm May 13, 2026