Question

我已经查看了链接的其他来源，我仍然不确定在动态创建输入时如何找到输入的值。我正在创建一个电子商务商店项目，每当用户向购物车添加内容时，在购物车页面上，我都会显示每个购物车商品。然后每个购物车项目都有一个数量输入框，以便用户可以根据需要更改数量（当他们按下动态创建按钮时）。这是代码：

我有一个foreach循环，用于确定需要显示的项目数，然后是我的代码中的一行：

     <tr><td> <input type=\"number\" class =\"cartQuant\" name=\"quantity\" 
     data-row-quant=" + row['itemid'] + " value="+ row['quantity']+"><a 
     data-role='button' data-theme='a'  data-row-id=" + row['itemid'] + " 
     data-row-num=  " + i + " href='#'>UPDATE</a></td></tr>"

我有一个onclick事件处理程序：

     $("#user_Cart a").on("click", clickHandler);

它所调用的功能：

      function clickHandler() {
             var row = $('#user_Cart tr').eq($(this).attr("data-row-num"));
             var quantity = row.find('#cartQuant').val();
      }

我虽然上面的工作方法是先获取行，然后从该行中找到输入值。我得到一个未定义的数量值。

Answer 1

您的班级选择器无效，您应使用.代替#。

var quantity = row.find('.cartQuant').val();

.是一个类选择器，#是一个id选择器。

Answer 2

您可以简化代码：

在锚点击时获取最接近的tr而不是找到cartQuant并使用该值。

此外，因为您正在添加动态新行，您需要将事件委托给静态祖先（如文档）：

＆＃13;

$(document).on("click", "#user_Cart a", function(e) {
    var quantity = $(this).closest('tr').find('.cartQuant').val();
    console.log(quantity);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="user_Cart">
    <tbody>
    <tr>
        <td><input type="number" class="cartQuant" name="quantity"
                   data-row-quant=row[itemid]" value="row[quantity]"><a
                data-role='button' data-theme="a" data-row-id="row[itemid]"
                data-row-num=" + i + " href='#'>UPDATE</a></td>
    </tr>
    </tbody>
</table>

＆＃13;

JQuery如何在表中获得dynalically创建的输入值？

2 个答案: