越来越空的警报文本上点击确认按钮

Question

这里是脚本 -

function gettext() {  
    var $row = $(this).closest("tr"); 
    var $text = $row.find(".id").text(); 
    alert($text); 
} 

这里是HTML代码 -

<tr> 
    <td>1</td> 
    <td class="id"> 
     <%=u.getMid()%> 
    </td> 
    <td> 
     <%=u.getName()%> 
    </td> 
    <td> 
     <%=u.getEmailId()%> 
    </td> 
    <td> 
     <%=u.getStatus()%> 
    </td> 
    <td> 
     <button type="submit" class="btn btn-success bnt-sm" onclick="gettext()">Approve</button> 
     <button type="submit" class="btn btn-danger bnt-sm">Reject</button> 
    </td> 
</tr> 

让我知道为什么它不工作

Answer 1

问题是因为您正在使用on*事件属性来调用该函数。这意味着this将引用window，而不是单击元素。

要解决此问题，您可以通过删除on*属性并使用不显眼的JS代码绑定事件处理程序来改善您的代码。试试这个：

$('.btn-success').click(function() { 
 
    var $row = $(this).closest("tr"); 
 
    var $text = $row.find(".id").text(); 
 
    alert($text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td >1</td> 
 
    <td class="id">Mid</td> 
 
    <td>Name</td> 
 
    <td>EmailId</td> 
 
    <td>Status</td> 
 
    <td> 
 
     <button type="submit" class="btn btn-success bnt-sm">Approve</button> 
 
     <button type="submit" class="btn btn-danger bnt-sm">Reject</button> 
 
    </td> 
 
    </tr> 
 
</table>

需要注意的是，如果你有一个父form元素，那么你可能需要停止表单提交，这取决于你的意图，点击提交按钮时。我还建议给他们每个人一个name属性，以便您可以识别发送请求时点击了哪个。