Question

我有以下代码。我需要检索.data中的值。虽然我知道它在表单上显示时确实有值，但它显示为空白。

$('#Settings').on('click', '#senpop', function(e) {
  e.preventDefault();
  $('.field-validation-error').find('span').text('');
  $('#SensName').text($(this).data('sensname'));
  $('#SelectSenID').val($(this).data('sens'));

  // Note that the above code updates the values fine for the elements above. Below I am trying to get the value of "sensname" to show up in an alert but shows blank. 
  // I know there is a value because it does show up properly on the form but not able to 
  // retrieve it here. 

  var sens = $("#senpop");
  var inf = sens.data("sensname");
  alert(inf);

  $('#ViewModal').modal({
    backdrop: 'static',
    keyboard: false,
    show: true,
  });

});

<div class="hidden-lg hidden-sm hidden-md header_mobile">Name</div>
<div class="mobile_data">
  <a href="#" id="senpop" data-sens="@item.Sens" data-sensname="@item.SensName">@item.Name</a>
</div>

Answer 1

我能够通过以下设置在Chrome和Firefox中获取数据属性。

首先 - 是的，最佳做法是不要像这样使用alert()进行调试。始终默认为console.log()。

接下来，我猜你的HTML结构更像是这样：

<div id="Settings">
  Settings
  <div class="hidden-lg hidden-sm hidden-md header_mobile">Name</div>
  <div class="mobile_data">
    <a href="#" id="senpop" data-sens="@item.Sens" data-sensname="@item.SensName">@item.Name</a>
  </div>
</div>

...因为您将click处理程序绑定到#Settings元素。确保#Settings元素不是<a>，因为嵌套<a>标记无效。

接下来，请确保将jQuery和js脚本放在结束</body>标记之上，这是最佳做法

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="/js/yourscript.js"></script>
</body>

...或者，如果由于某种原因无法将脚本添加到正文中，请将脚本包装在document.ready中：

$( document ).ready(function() {
  // your js code
});

所以，这是工作代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
    <div id="Settings">
      Settings
      <div class="hidden-lg hidden-sm hidden-md header_mobile">Name</div>
      <div class="mobile_data">
        <a href="#" id="senpop" data-sens="@item.Sens" data-sensname="@item.SensName">@item.Name</a>
      </div>
    </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script>
    $('#Settings').on('click', '#senpop', function(e) {
      e.preventDefault();
      console.log('#settings clicked');
      $('.field-validation-error').find('span').text('');
      $('#SensName').text($(this).data('sensname'));
      $('#SelectSenID').val($(this).data('sens'));

      // Below I am trying to get the value of sensor to show up in an alert but shows blank.
      // I know there is a value because it does show up properly on the form but not able to
      // retrieve it here.

      var sens = $("#senpop");
      var inf = sens.data("sensname");
      console.log(inf);

      $('#ViewModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: true,
      });
    });
  </script>
  </body>
</html>

以下是运行此代码并点击#senpop：

的屏幕截图

获取要在警报时显示的数据值

1 个答案: