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>
    }

Answer 1

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.

Answer 2

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

Answer 3

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);
};

Answer 4

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);
};