Javascript警报仅针对表中的顶行启动

我试图在每次单击按钮时发出警报，按钮是表中的一列

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

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

{{unipart.part}
$（“#购买”）。单击（函数（）{
var myPart=$（“#部件名称”）.text（）；
警报（我的部分）；
});

---

注意：我已经在

td

标记和

a

标记中尝试了

id=“Buy”

。

如果要绑定到多个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>

{{unipart.part}
$（'.buy'）。单击（函数（）{
var myPart=$（this）.closest（'tr'）.children（'.part name'）.text（）；
警报（我的部分）；
});

不要使用ID“Buy”，而是给类名“Buy”，然后使用下面的代码

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

---

这是因为您是根据其ID选择的。Id应该是唯一的，因此jQuery将获取第一个Id。如果你使用类，它会工作得更好

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

{{unipart.part}
$（'.Buy'）。单击（函数（）{
var myPart=$（“#部件名称”）.text（）；
警报（我的部分）；
});

也许您需要这样做：

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

{{unipart.part}
$（'.Buy'）。单击（函数（）{
var myPart=$（“#part name-”+$（this.attr（“partId”））.text（）；
警报（我的部分）；
});

---

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

显示一些不起作用的代码。您的所有单元格或行是否使用相同的ID？ID必须是唯一的。改用类。我不确定我是否理解你的结构。话虽如此，我还是大胆猜测一下，假设你有一组重复元素，它们的ID都是“买和”零件名。把结构放在一边。。一条非常重要的规则是：每页只能有一个具有唯一ID的元素。如果你想以多个元素为目标，那就是类的作用。如果你所有的tds都有相同的ID，那么它就不起作用了。改为使用唯一ID（ID的定义为）are class=“Buy”。编辑j08691比IThanks快！这正在工作，但为

最近的（）

返回一个空白。。。如果只有

$（'.part name'）.text（）它返回列中所有零件名称的列表。你知道为什么它会返回一个空白的
最近的（）
？@user1328021在这种情况下，你可能不想再次考虑使用最近的（）。我不确定你的完整DOM结构。如果$（'.part name'）.text（）工作正常，则使用它。它将返回列中的每一项。。。我只想要对应于同一行的内容。@user1328021我需要查看更多的html，以确定这是如何工作的。是否有多个零件名称跨距？或者每个表行有一个？如果span和td都具有相同的父元素，则我的最新更新将适用于you@user1328021不客气！很高兴它对你有用