无法通过 jquery 的点击事件获取输入值

Question

我正在动态创建一个 table，其中包含一些动态生成的按钮。我在使用 POST 之前做了同样的事情并且它起作用了。现在我正在使用 AJAX 所以我需要通过点击事件获取隐藏的 form 元素的值。但是，它总是给我第一个值（第一个 row/form）。

下面是精简代码的示例。

每个按钮必须有不同的名称吗？如果是这样，我将如何将所有这些绑定到点击事件？

<pre><code>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="assets/js/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">

            $(document).ready(function () {
                $(document).on("click", "input[name='vsu']", function(event){
                    console.log('sliste'+$("input[name='sliste']").val());  
                    event.preventDefault();
                });                     
            });
        </script>
    </head>

    <body>
        <table id="slist"> 
            <tbody>
                <tr>
                    <td>user1</td>  
                    <td>
                        <form>
                            <input type="hidden" name="sliste" value="1">
                            <input name="vsu1" type="submit" value="view">
                        </form>
                    </td>        
                 </tr>
                 <tr>
                    <td>user2</td>  
                    <td>
                        <form>
                            <input type="hidden" name="sliste" value="2">
                            <input name="vsu2" type="submit" value="view">
                        </form>
                    </td>        
                </tr>    
            </tbody>
        </table>
    </body>
</html>
</pre></code>

Answer 1

您需要找到输入元素，它是被点击按钮的前一个同级元素，所以

$(document).ready(function () {
    $(document).on("click", "input[name='vsu']", function (event) {
        console.log('sliste' + $(this).prev("input[name='sliste']").val());
        event.preventDefault();
    });
});

当您使用 $("input[name='sliste']") 作为选择器时，它将找到所有具有给定名称的输入元素，然后当您使用 .val() 作为 getter 时，它将 return给定元素集中第一个元素的值。

$(document).ready(function() {
  $(document).on("click", "input[name='vsu']", function(event) {
    console.log('sliste' + $(this).prev("input[name='sliste']").val());
    event.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="slist">

  <tbody>
    <tr>
      <td>user1</td>  
      <td>
        <form>
          <input type="hidden" name="sliste" value="1">
          <!-- changed the button type since the code snippet does not allow submit requests-->
          <input name="vsu" type="button" value="view">
        </form>
      </td>        
    </tr>
    <tr>
      <td>user2</td>  
      <td>
        <form>
          <input type="hidden" name="sliste" value="2">
          <input name="vsu" type="button" value="view">
        </form>
      </td>        
    </tr>    
  </tbody>
</table>

无法通过 jquery 的点击事件获取输入值

Can't get input value with click event with jquery

javascript

jquery

input