Question

我在表格中显示用户列表。然后，我有一个按钮，允许用户查看有关特定用户的更多详细信息。但是，我很难获得被点击的用户的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>
      }
    }
}

我的jQuery功能

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

}）;

我也是这样尝试的：

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

这是我创建的Javascript函数。它一直在给予

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

我收到此错误：

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

于2015年11月21日美国东部时间上午7点53分更新

我删除了for循环并使用1个单击按钮创建了一个单元格。点击事件未注册。我尝试过＆＃39; on＆＃39;，＆＃39; live＆＃39;，＆＃39;委托＆＃39;没有成功。

<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

您正在尝试获取不存在的属性id。使用以下内容获取data-id

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

您也可以使用

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

第二个（删除var）：

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

Answer 2

在我的视图中如何生成链接的数据的部分代码。更改ID而不是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>
  }
}
}

我的jQuery函数

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

});

我也是这样试过的：

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

这是我创建的Javascript函数。它一直在给予。（在功能之前删除var。）

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

Answer 3

Here是我用 JavaScript运行时错误重现您的问题的方法：＆＃39; test＆＃39;未定义。

方案

我猜你已经在你的jQuery DOM ready函数test中定义了函数$(function(){...}。

如果是这样，函数test是未定义的，因为在加载DOM时，DOM元素上的事件处理程序正在注册（在您的情况下是链接中的onclick），函数test 尚未为文档所知，因此未定义。

解决方案

尝试将您的test函数声明移到jQuery的DOM就绪函数之外。也就是说，

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

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

DEMO

Answer 4

我发现导致问题的原因。我在表单中有一个模态弹出窗口。我想添加一个textarea，所以我添加了这个代码＆＃39;

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

这是阻止我获得点击事件的代码。当我正在玩代码时，我注释掉了模态弹出窗口，事情开始起作用了。然后，我评论了模态的部分，直到我终于找到了罪魁祸首。在我评论它的那一刻，代码就可以了。

jQuery单击事件以使动态创建的链接不起作用

4 个答案:

方案

解决方案