选择使用＆＃34;这个＆＃34;使用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元素
的值
• 在change元素上生成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元素

上生成一个change事件

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

注意：这可以在有或没有先前的值更改的情况下完成。

注意：您已在评论中说过＆＃34;我只想让下拉菜单打开并在我点击div＆＃34;时选择该值，但这不会发生。点击事件不会触发打开选择。请参阅此示例，其中避免了递归（元素未嵌套）：jsfiddle.net/TrueBlueAussie/zgub3838/7

Answer 2

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

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