Question

问题很简单，但由于某些原因我无法修复它。这是打开模态框的 a href标记。

<center><a href="javascript:void();" class="btn-home" data="<?php echo $cid;?>" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" href="#">Apply</a></center>

这是从数据属性中获取id的jquery。

<script type="text/javascript">
$('document').ready(function()
{
    $(document).on('click', '#btn-classified', function() {
    //$("#btn-classified").on("click", function () {
     //$("#btn-classified").click(function() {   
     var myvar1 = $(this).data('data');
     alert(myvar1);

});
});
</script>

由于某种原因，如果我使用$(document).on('click', '#btn-classified', function() {我没有得到任何输出如果我使用$("#btn-classified").on("click", function () {，那么我将得到未定义。

Answer 1

获取数据＆＃39; <a>元素的属性使用jQuery的.attr()函数

＆＃13;

  $('document').ready(function() {
    $(document).on('click', '#btn-classified', function() {
      var myvar1 = $(this).attr('data'); // .attr() to get attribute of an element
      alert(myvar1);
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='btn-classified' data='This an element of DOM'>Get this DATA value</a>

＆＃13;

当您调用函数之后存在的元素时，您的代码在事件click上未定义。

你需要在你想要的jQuery上使用

来表现代码的逻辑

$(document).ready(function(){ 
 //your functions with selectors of DOM 
})

或使用jQuery的.on()函数来处理事件。

$(document).on('click', '.mainButton', function(){
 //your code
})

Answer 2

你有两个href - 一个说javscript:void();另一个有哈希（＃）删除一个。然后你就不会被定义。

Answer 3

您需要在HTML中将data更改为data-id。这样你可以在你的javascript中访问数据属性，如下所示：

$('#btn-classified').on('click', function() {
  alert($(this).data('id'));
});

$(this).data('data')实际上会在您的HTML中预期data-data="<?=$someId?>"。

Answer 4

根据文档https://api.jquery.com/data/，该属性应该是数据数据如果需要通过.data函数获取。

＆＃13;

$('document').ready(function()
{
$(document).on('click', '#btn-classified', function() {
//$("#btn-classified").on("click", function () {
 //$("#btn-classified").click(function() {   
 var myvar1 = $(this).data('data');
 alert(myvar1);
});
});

＆＃13;

 <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<body>
<center>
  <a href="#" class="btn-home" data-data="123" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" >Apply
  </a>
  </center>
 </body>

＆＃13;

Answer 5

使用.attr（'data'）代替.data（'data'）函数，因为.data函数用于存储与匹配元素关联的任意数据，或者返回指定数据存储区中第一个元素的值匹配元素的集合。

传递数据时点击不正常的Jquery

5 个答案: