Question

I have an element within a table in html:

<td><a id="href0" href="#" data-productid="0">Product 1</a></td>

and i need to get the value of the "data-productid" attribute

at the moment i have this code:

$(document).ready(function(){
  $('#href0').click(function(event) {
    event.preventDefault()
    console.log(this.dataset.productid)
    return false;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>

and nothing is being printed in the console.

I am using handlebars

Answer 1

我们设法确定您正在使用把手模板

然后可能是在编译车把时动态插入链接的情况。

如果是这种情况，则需要委托，那么这个问题就是Event binding on dynamically created elements?

的重复项

$(document).ready(function(){
  // document or the nearest STATIC container
  $(document).on('click','[data-productid]',function(event) {
    event.preventDefault()
    console.log(this.dataset.productid)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
<td><a id="href0" href="#" data-productid="1">Product 2</a></td>

Answer 2

您完全不需要{{1}中的a（甚至不需要td或id上的a），只需应用单击td的处理程序，并在其上具有data属性，以便在单击它时-控制台将记录data属性。

td

$(document).ready(function(){
  $('td').click(function() {
    let id = $(this).attr('data-productid');
    console.log('The product id is ' +id)
  })
});

table {
  border-collapse: collapse
}


td {
  border:solid 1px #d4d4d4;
  padding: 10px 20px;
  border-collapse: collapse
}

如果您绝对必须拥有<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td data-productid="1">Product 1</td> <td data-productid="2">Product 2</td> </tr> <tr> <td data-productid="3">Product 3</td> <td data-productid="4">Product 4</td> </tr> </table>-那么它与上面相同-只是应用于其他元素

$(document).ready(function(){
  
  $('a').click(function(event) {
    event.preventDefault();
    let id = $(this).attr('data-productid');
    console.log('The product id is ' +id)
  })
});

table {
  border-collapse: collapse
}


td {
  border:solid 1px #d4d4d4;
  padding: 10px 20px;
  border-collapse: collapse
}

从html <a> element using jquery

2 个答案: