Binding click function to dynamic divs

Question

There will be number of such div created with unique div id, when i click on click me it should show an alert for that productid, i am doing it like

<div id="xyz{productid}">
    Click Me
</div>
.....
<script type="text/javascript">
    var uuid="{productid}"
</script>
<script src="file1.js">

code from file1.js

$(function () {
    var d = "#xyz" + uuid;
    $(d).click(function () {
        alert("Hello" + uuid);
        return false;
    });
    alert(d);
});

So code is also ok,but the basic problem with it is, since i m doing it on category page where we have number of products,this function is getting bound to last product tile only, I want it to be bound to that specific div only where it is been called

.............................. got a solution sorry for late reply,was on weekend holiday, but i solved it by class type of architecture, where we create an object with each tile on page,and at page loading time we initialize all its class vars,so you can get seperate div id and when bind a function to it, can still use the data from its class variables, i m posting my code here so if any one want can use it,

UniqeDiv= new function()
{   
var _this = this;   
var _divParams = null;
var _uuid=null;
//constructor   
new function(){     

//$(document).bind("ready", initialize);

//$(window).bind("unload", dispose);


_uuid=pUUID;

initialize();

$('#abcd_'+_uuid).bind("click",showRatingsMe)

dispose();


}

function initialize(){

}
function showRatingsMe(){       
    alert(_uuid);       
}   
function dispose(){ 
    _this = _divParams = null
}
}
//In a target file, im including this js file as below
<script type="text/javascript">
    var pUUID="${uuid}";        
</script>
<script type="text/javascript" src="http://localhost:8080/..../abc.js"></script>

so problem is like it is not binding click event to all divs, but it is doing it for last div only, i am loding these divs as tiles on a page and this script also with each tile ,so im sure to have a function for each tile,but problem is that it is not binding with that div where it is loaded... — user2408578
– user2408578, Commented Jul 12, 2013 at 13:12
Please edit your question and add the relevant information. It will get less attention if you only put it as a comment. I assume that at the moment you run the code, uuid will have the value for the last div. Since you don't how how exactly you are creating multiple elements, I don't think we can provide any help. Please provide more information. — Felix Kling
– Felix Kling, Commented Jul 12, 2013 at 13:22

Adil · Accepted Answer · 2013-07-12 13:12:09Z

2

You can use attribute selector with starts with wild card with jQuery on() to bind the click event for dynamically added elements.

$(document).on("click", "[id^=xyz]", function(){
   //your code here
   alert("Hello"+this.id);
   return false;
});

answered Jul 12, 2013 at 13:12

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2408578 Over a year ago

its a same problem since it always finds first div starting with that xyz it will bind all functions with that div only,same is my experience when i debugged it , when i click on first button on product tile it gave me 10 alerts since there are 10 products on my category page

user2408578 Over a year ago

yes i m using loop to show those products on a page, and im in each iteration calling this js file (file1.js) and sending parameter to it which is uuid

user2408578 Over a year ago

sorry for late reply,was on weekend holiday,

user2408578 Over a year ago

Thanks for your quick support to this newbie,added my knowledge

colestrode · Accepted Answer · 2013-07-12 13:35:34Z

0

I would add a class to each of your dynamic divs so that they are easier to query. In the following example, I'm using the class dynamic to tag the div's that are added dynamically and should have this click listener applied.

To attach the event, you can use delegated events with jQuery's on() function. Delegated events will fire for current and future elements in the DOM:

$(function() {  
    var d="#xyz"+uuid;
    $(document).on('click', 'div.dynamic', function() {
        alert("Hello"+uuid);
        return false;
    });     
});

You can read more about event delegation here.

edited Jul 12, 2013 at 13:35

answered Jul 12, 2013 at 13:13

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

3 Comments

user2408578 Over a year ago

what is div.dynamic here is my confusion,sorry for my bad

colestrode Over a year ago

@user2408578 Good question; I didn't really explain it. That a class that could be added to all dynamic divs to make them easier to query. I updated my answer to clarify.

user2408578 Over a year ago

Thanks for your quick support to this newbie,added my knowledge

Hitesh · Accepted Answer · 2013-07-12 13:44:33Z

0

You can use

$("[id*='divid_']").click(function(){ });

but for this you need to make sure that all div IDs start with "divid_".

answered Jul 12, 2013 at 13:44

Hitesh

451 silver badge4 bronze badges

1 Comment

user2408578 Over a year ago

Same as earlier reply but Thanks for your quick support

Collectives™ on Stack Overflow

Binding click function to dynamic divs

3 Answers 3

4 Comments

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Related