Javascript jQuery.on（）问题，console.log（）工作，但元素交互不工作'；T

我正在

$（document.ready（function（）{…}）

中使用此代码：

发生的情况是console.log（）正在工作，但是

$quantity\u percent

没有显示/隐藏

此外，如果我在函数的开头添加了一个警报（“test”）（就在

e.preventDefault

之后），这也不起作用，但console.log（）继续起作用（它正确地记录了“未隐藏”）

编辑：相关HTML标记：

<div id="flavours">

<div class="row flavour" id="flavour_1" style="display: block;">
    <div class="form-group">
        <div class="col-xs-12">
            <fieldset>
                <legend>Flavour 1</legend>
                <div class="col-sm-4">
                    <label>Flavour Name</label>
                    <input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
                    <input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
                    <p class="flavour_info"></p>
                </div>
                <div class="col-sm-6">
                    <label>Flavour Quantity &nbsp; <a href="#" class="btn btn-link btn-xs toggle-quantity"><span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</a></label>
                    <div class="input-group" id="quantity_percent">
                        <input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
                        <span class="input-group-addon">%</span>
                    </div>
                    <div class="input-group" id="quantity_drops" style="display: none;">
                        <input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
                        <span class="input-group-addon">drops/ml</span>
                    </div>
                    <p class="flavour_recommended_percentage"></p>
                </div>
                <div class="col-sm-2">
                    <label>&nbsp;</label>
                    <button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
                </div>
            </fieldset>
        </div>
    </div>
</div>

风味1
风味名称

风味量
%
滴/毫升

去除

$（this）.parent（）

是一个标签元素，它没有子元素

.quantity\u percent

另外，

quantity\u percent

是一个id，而不是一个类。使用ID选择器

所以使用

var $quantity_percent = $('#quantity_percent');

而不是

var $quantity_percent = $(this).parent().find('.quantity_percent');

注意：ID在HTML中必须是唯一的

编辑：根据OPs评论

我将其更新为类而不是ID（因为它位于动态增长的列表中）

用法

---

.parent（）

以

为目标，因此它无法找到

.quantity\u percent

提供相关的HTML标记。如果日志正常工作，那么

上的
就没有问题，一定是其他问题…请发布相关的HTML结构或最低演示…
警报（$quantity\u percent.length）
你得到了什么？如果0，则表示元素不存在。您还可以执行
console.log（$quantity\u percent）
以查看它是否确实可以找到元素。“console.log（）正在工作”哪一个？两者都是？而且，
quantity\u percent
是一个id而不是一个类。使用
#
selectorI现在已将其更改为
var$quantity_percent=$（this）.最近（'.col-sm-6'）。查找（'.quantity_percent'）但它仍然不起作用。我已经记录了
$quantity\u percent
对象，它返回时带有：[prevObject:x.fn.x.init[0]，上下文：a.btn.btn-link.btn-xs.toggle-quantity，选择器：“.quantity\u percent”，jquery:“2.0.3”，构造函数：函数…]`@a1phanumeric，使用
$（“#quantity\u percent”）
抱歉-我是个扳手-我将它更新为类而不是ID（因为它在一个动态增长的列表中），现在工作正常！我有时真是个油炸圈饼。谢谢你的帮助！你知道为什么警报根本不起作用吗？（这并不紧急，我只是想知道为什么它似乎不起作用！）这看起来像是一个评论。那么解决办法是什么呢？
var $quantity_percent = $(this).parent().find('.quantity_percent');

var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');