Question

每次点击按钮时，我都会尝试设置警报，这是表格中的一列。

但是，警报仅在用户单击顶行中的按钮时才起作用。它下面的所有行都不起作用。为什么呢？！

<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>



    <td id ="Buy">
                <a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
            </td>


<script type="text/javascript">
$('#Buy').click(function() {
   var myPart = $('#part-name').text();
   alert (myPart);
});
</script>

注意我已在id="Buy"标记和td标记中尝试使用a。

Answer 1

如果要绑定到多个DOM元素，请绑定到它们共享的类（创建一个新类并在每个元素上使用该类）。

您的DOM结构似乎有些令人困惑，但如果我理解正确，这应该可行。

<span class="inline" id="part-name" class="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>

<td class="buy" id ="Buy">
            <a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
        </td>


<script type="text/javascript">
$('.buy').click(function() {
   var myPart = $(this).closest('tr').children('.part-name').text();
   alert (myPart);
});
</script>

Answer 2

代替ID“购买”，将类名称“购买”，然后使用以下代码

 $('.Buy').on('click',function(){
     alert($('#part-name').text());
 });

Answer 3

这是因为你用他们的ID选择了s。 Id应该是唯一的，所以jQuery抓住了第一个。如果你使用类，它会更好。

<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>

<td class='Buy'>
  <a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>


<script type="text/javascript">
$('.Buy').click(function() {
  var myPart = $('#part-name').text();
  alert (myPart);
});
</script>

Answer 4

也许您可能想要这样做：

   <span class="inline" id="part-name-{{partID}}" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>



    <td class ="Buy">
                <a class="btn btn-warning" href="{{offer.buynow_url}}" partId="{{partID}}">BUY NOW </a>
            </td>


<script type="text/javascript">
$('.Buy').click(function() {
   var myPart = $("#part-name-"+$(this).attr("partId")).text();
   alert (myPart);
});
</script>

除非您使用的是HTML5，否则会中断验证。

Javascript警报仅启动表格中的顶行

4 个答案: