Question

基本上我有以下

$("#amount").keyup(function() {
    if($(this).val() != "") {
        alert($(this).closest("form").find('input[id="price"]').val());
    }
});

HTML 布局如下

<form class="submitOrder" method="POST">
    <fieldset>
        <div class="form-group">
            <label>Amount</label>
            <input type="text" class="form-control" id="amount">
        </div>
        <div class="form-group">
             <label>Price</label>
             <input type="text" class="form-control" id="price" value="$1" disabled="">
        </div>
    </fieldset>
</form>

根据此声明，$(this).val()始终返回空值，表示不会处理alert，为什么会这样？

我在JSFiddle中的确切 HTML 模型：http://jsfiddle.net/7PPBq/3/

Answer 1

我看到了两个问题：

对于'price'和'amount'，您有多次使用相同的ID。 Ids需要独一无二。您可能希望为输入提供name属性，而不是id或者除了id之外，因为名称将是在帖子中标识输入的方式。
html无效。表格中的div不会在应有的位置结束。

See this fiddler for a working example.

 <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-xs-12 col-sm-7">
        <div class="row">
                <div class="col-7">
                    <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#facebook" data-toggle="tab">Facebook</a></li>
                <li><a href="#twitter" data-toggle="tab">Twitter</a></li>
                <li><a href="#youtube" data-toggle="tab">YouTube</a></li>
                <li><a href="#instagram" data-toggle="tab">Instagram</a></li>
            </ul>

            <div class="tab-content">
                <div id="ajaxResponse"></div>
                <div class="tab-pane active" id="facebook">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Create Order</h3>
                        </div>
                        <div class="panel-body">
                            <form class="submitOrder" method="POST">
                                <fieldset>
                                        <label for="fname">Amount</label>
                                        <input type="text" class="form-control" id="amount">

                                        <label for="fname">Price</label>
                                        <input type="text" class="form-control" id="price" value="$1" disabled>
                                </fieldset>
                            </form>
                        </div>
                    </div>
            </div>
            </div>
        </div><!--/span-->
    </div><!--/row-->
</div>

Answer 2

您不能拥有多个共享完全相同ID的元素

将所有id="amount"更改为class="amount"。

将所有id="price"更改为class="price"。

将您的JS更改为：

$(".amount").keyup(function() {
    if($(this).val() != "") {
        alert($(this).closest("form").find(".price").val());
    }
});

Answer 3

我在这里看不到任何问题。你导入了jQuery库吗？

<script type="text/javascript" src="/js/jquery191.js"></script>

http://jsfiddle.net/whyach/LDYxD/

Answer 4

尝试这样做：

$("#amount").keyup(function() {
    if($(this).val() != "") {
        alert($(this).parents('.tab-pane').find('input[id="price"]').val());
    }
});

小提琴here

这个jQuery语句出了什么问题

4 个答案: