选择using "this“关键字using document.on(..) - Jquery

Question

我的html代码(在页面加载后从json文件中获取)：

<div class="fooditem">
       <select class="quan">
               <option value="0">0</option>
       </select>
 </div>

我的javascript/jquery代码：

$(document).on("click", ".fooditem", function() {
    $(this).find('.quan').click();
});

当我点击div时，我想点击选择选项标签。

我发现这里的this关键字代表的是document，而不是特定的类。

那么我该怎么做呢？

这是link

Answer 1

第一个问题：

通过侦听click，然后在后代元素上生成click，您会得到一个无限循环……

唯一的解决方案是：

• 将子元素移到捕捉单击的元素之外。

注意:您不能阻止select的单击处理程序，否则它将停止工作。

作为替代方案，您可以执行以下操作之一：

将焦点设置为select元素上的element

• Generate a select事件的值(就像选择了该元素一样)

但您不能简单地弹出选择并选择该项。

示例如下：

1)设置焦点

$(document).on("click", ".fooditem", function(e) {
    $(this).find('.quan').focus();
});

2)更改选择的值

$(document).on("click", ".fooditem", function(e) {
    $(this).find('.quan').val(0); // or whatever value
});

3)在select元素上生成更改事件

$(document).on("click", ".fooditem", function(e) {
    $(this).find('.quan').trigger('change');
});

注意:这可以在更改或不更改先前值的情况下完成。

注意:您在注释中说过“我只希望在单击div时打开下拉菜单并选择相应的值”，但这不会发生。单击事件不会触发选择的打开。请参阅此示例，其中避免了递归(元素未嵌套)：jsfiddle.net/TrueBlueAussie/zgub3838/7

Answer 2

您正在将onclick事件绑定到文档。尝试将您的jQuery代码片段更改为以下代码：

$(".fooditem").on("click", function(e) {
    e.preventDefault();
    $(this).find('.quan').click();
});