jQuery Click Event for Dynamically Created Links Not Working

Question

I am displaying a list of users in a table. Then, I have a button to allow a user to view more details about a specific user. However, I am having a hard time getting the ID for the user that is clicked on. I am not sure why it's not working. What am I doing wrong? I tried several options, and none of them work.

Partial code of how data the links are generated in my view.

 if (Model != null) {
    if (Model.Count() > 0) {
         foreach (var item in Model) {
        <tr>
        <td><div class="centerText">@item.UserID</div></td>
        <td><div class="centerText">@item.FirstName</div></td>
        <td><div class="centerText">@item.LastName</div></td>
        <td><div class="centerText"><a href="#" class="btn btn-default Detail" id="@item.UserID">Details</a></div></td>
        </tr>
      }
    }
}

My jQuery function

$(function () {
   $('.Detail').on('click', function (event) {
      var dt = $(this).attr('id');
       console.log('dt');
   });

});

I also tried it this way:

if (Model != null) {
    if (Model.Count() > 0) {
         foreach (var item in Model) {
        <tr>
        <td><div class="centerText">@item.UserID</div></td>
        <td><div class="centerText">@item.FirstName</div></td>
        <td><div class="centerText">@item.LastName</div></td>
        <td><div class="centerText"><a href="#" class="btn btn-default Detail" onclick="test(@item.UserID)" data-id="@item.UserID">Details</a></div></td>
        </tr>
      }
    }
}

Here is the Javascript function that I created. It kept giving

function test(e){
  console.log(e);
};

I get this error:

0x800a1391 - JavaScript runtime error: 'test' is undefined

updated on 11/21/15 @7:53 AM EST

I removed the for loop and created a single cell with 1 click button. The click event is not registered. I tried it with 'on', 'live', and 'delegate' with no success.

<div class="table table-responsive" style="width:100%;height:100%;">
    <table class="table table-bordered table-condensed table-striped">
        <thead>
            <tr>
                <th><div class="centerText">Date Created</div></th>
                <th colspan="2"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="6"><div class="centerText"><a href="#" class="btn btn-default Detail">Detail</a></div></td>
            </tr>
            </tbody>
        </table>
   </div>


@section Scripts {
    <script type="text/javascript">
        $('.table tbody tr td div').delegate('.Detail','click', function ()       
        {
            console.log('you click me');
        });
     </script>
    }

try to function test(e) instead of var function test(e). — Kaushik Maheta
– Kaushik Maheta, Commented Nov 21, 2015 at 5:32
You need to use var dt = $(this).data('id'); - your adding a data- attribute to the link, not an` id attribute — user3559349
– user3559349, Commented Nov 21, 2015 at 5:46
I changed it to 'var dt = $(this).data('id');', but the click event is not being registered. When I click on the button, it did not show errors in the console window, but I did not see my expected result either. — Jean B
– Jean B, Commented Nov 21, 2015 at 6:17
Are you adding this links dynamically (i.e. after the initial page has been loaded? (in which case you need to use event delegation) — user3559349
– user3559349, Commented Nov 21, 2015 at 9:05
Re your last edit - you have the parameters the wrong way around - $('.table').on('click', '.Detail', function() { — user3559349
– user3559349, Commented Nov 21, 2015 at 20:37

Polynomial Proton · Accepted Answer · 2015-11-21 05:39:19Z

1

You are trying to get the attribute id which doesn't exist. Use below to get data-id

$(function () {
   $('.Detail').on('click', function (event) {
      var dt = $(this).data('id'); 
       console.log(dt);
   });

you can also use

var dt = $(this).attr("data-id");

Second one (remove var):

function test(e){
  console.log(e);
};

answered Nov 21, 2015 at 5:39

Polynomial Proton

5,18023 silver badges37 bronze badges

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

2 Comments

Jean B Over a year ago

I remove data from the attribute. I am still not getting anything. I commented out this section "var dt = $(this).data('id'); " and did a console.log('dt');' There was nothing in the console view. It did not register the click event. In addition, I remove the word 'var' that was appearing in from of the function name. It still gave me the function not define error.

Polynomial Proton Over a year ago

Don't put dt in quotes in console.log. also try stepping through your code by putting break points. You will know what's going o ln

Kaushik Maheta · Accepted Answer · 2015-11-21 05:39:04Z

Partial code of how data the links are generated in my view. change id instead of data-id.

if (Model != null) {
if (Model.Count() > 0) {
     foreach (var item in Model) {
    <tr>
    <td><div class="centerText">@item.UserID</div></td>
    <td><div class="centerText">@item.FirstName</div></td>
    <td><div class="centerText">@item.LastName</div></td>
    <td><div class="centerText"><a href="#" class="btn btn-default Detail" id="@item.UserID">Details</a></div></td>
    </tr>
  }
}
}

My jQuery function

$(function () {
   $('.Detail').on('click', function (event) {
     var dt = $(this).attr('id');
   console.log('dt');
   });

});

I also tried it this way:

if (Model != null) {
if (Model.Count() > 0) {
     foreach (var item in Model) {
    <tr>
    <td><div class="centerText">@item.UserID</div></td>
    <td><div class="centerText">@item.FirstName</div></td>
    <td><div class="centerText">@item.LastName</div></td>
    <td><div class="centerText"><a href="#" class="btn btn-default Detail" onclick="test(@item.EncounterID)" data-id="@item.UserID">Details</a></div></td>
    </tr>
  }
}
}

Here is the Javascript function that I created. It kept giving. (Remove var before function).

function test(e){
  console.log(e);
};

Ahmad Baktash Hayeri · Accepted Answer · 2015-11-21 07:33:23Z

0

Here is how I reproduced your problem with JavaScript runtime error: 'test' is undefined.

Scenario

I guess that you've defined the function test probably in your jQuery DOM ready function $(function(){...}.

If so, the function test is undefined because by the time the DOM is loading, AND the event handlers on DOM elements are being registered (in your case the onclick in the link), the function test is not yet known to the document, and therefore undefined.

Solution

Try to move your test function's declaration outside of jQuery's DOM ready function. That is,

$(function(){
   //code that has to run once the DOM is ready
}); 

function test(e){
   console.log(e);
}

DEMO

edited Nov 21, 2015 at 7:33

answered Nov 21, 2015 at 7:17

Ahmad Baktash Hayeri

5,9004 gold badges32 silver badges43 bronze badges

Comments

Jean B · Accepted Answer · 2015-11-21 13:33:01Z

0

I found what was causing the problem. I had a modal popup within the form. I was looking to add a textarea, so I added this code '

<textarea name="reasonForArchiveText" id="reasonForArchiveText" />

That's the code that was preventing me from getting the click event. As I was playing around with the code, I commented out the modal popup, and things started to work. Then, I commented section of the modal until I finally found the culprit. The minute that I commented it out, the code works.

answered Nov 21, 2015 at 13:33

Jean B

3411 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery Click Event for Dynamically Created Links Not Working

4 Answers 4

2 Comments

Comments

Scenario

Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Scenario

Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related