CODEWITHSUNDEEP
jqueryasp.net
YI Zhang
YI Zhang

Reputation: 1

Select the Dynamic Control by Id

I try to Create two same elements dynamically in table by Jquery, but the Id is problem. I try to create a Id based on element number, var id = "links" + i; However, I cannot choose this element by $(“#”)，even I use "Links1" as id selector. I don't know what's the problem.

<script type="text/javascript">
    $(function () {
        var number = 2;
        for (var i = 0; i < number; i++) {
            var id = "links" + i;
            var item = $("<td><a id ='" + id + "'>" + i + "</td>");
            $("#" + id).click(function () {
                alert("Great");
            });
            $("#TrInput").append(item);
        }
    });
</script>

<body>
<form id="form1" runat="server">
<div>
<table><tr id="TrInput"></tr></table>
</div>
</form>

Upvotes: 0

Views: 85

Answers (5)

user1
user1

Reputation: 1065

At the time of your binding , the element doesn't exist in the DOM. So it binds no click handlers as there is no element to bind to. As such, one simple solution would be to use delegation. Now, the beauty of using delegation is that no matter when the element is created, the handler gets assigned to the element. This should do the trick for you. 

$(document).on('click','#Links1', function(){
    alert('test');
});

PS:You should try and use delegation whenever you have to create element on the go (dynamically).

Upvotes: -1

Vidhya Sagar Reddy
Vidhya Sagar Reddy

Reputation: 1641

Change your script to the following:

     $(function () {
            var number = 2;
            for (var i = 0; i < number; i++) {
                var item = $("<td><a id ='links'>" + i + "</td>");
                $("#TrInput").append(item);
            }
        });

Once after creating the items, use on/delegate method, since click doesnot work for dynamically created elements; So, the next line of code would be:

$("#links").on("click",function(){
// As now you have two elements with the same ID, make use of: this property; 
   Suppose you want to change the color of that clicked element, that would be:
$(this).css("color","#0777da");
//This effects only the currently selected/clicked element and
  not every other element with the same Id.. 
});

Upvotes: 0

Smern
Smern

Reputation: 19066

You can add the listener directly on the item you just created...

var item = $("<td><a id ='" + id + "'>" + i + "</td>");
item.click(function () {
      alert("Great");
});
$("#TrInput").append(item);

Some have mentioned using delegation, this wouldn't be very practical to do with the current way that you are creating the IDs and accessing by ID. I would use a class to select on, like this:

var item = $("<td><a id ='" + id + "' class='itemClass'>" + i + "</td>");

and then you could change your selector for your event as such:

$("#form1").on("click", ".itemClass", function () { ...

Upvotes: 1

krishwader
krishwader

Reputation: 11371

Use event delegation. Instead of binding a click event to every single a in your td:

$("#TrInput").on("click", "a", function(e) {
  e.preventDefault(); //just in case
  alert("hi!");
});

So, since your tr is already present it would be happy to delegate the event handling when a is clicked. And, if your tr is also dynamic, you'd do something like this :

$("table").on("click", "tr a", function(e) {
  e.preventDefault(); //just in case
  alert("hi!");
});

Upvotes: 0

Eli Gassert
Eli Gassert

Reputation: 9763

At the time of your binding $('#' + id), that element doesn't exist in the DOM. So it binds no click handlers.

Instead, bind to item.click or only bind after calling append. Alternatively, you could use event delegation and bind to document but for that solution, best to look up jQuery event delegation and see how that works.

Upvotes: 3

Related Questions