在Ember.js应用程序中选择了未触发的选择事件

我在Ember应用程序中的表单中具有以下字段结构：

<div class="box">
  <label>Name</label>
  {{text-input value=model.name}}
</div>

<div class="box">
  <label>Gender</label>
  {{chosen-select value=model.gender content=selectOptions.genders}}
</div>

通过将click事件处理程序附加到文档，我能够捕获在声明此事件处理程序时不存在的

.box

元素上的单击。结果是，每当单击

.box

元素时，其中的文本输入字段（如果有）就会获得焦点

为您实现这一目标

我想为包含所选select的

.box

元素实现等效行为，即在单击周围的

.box

时，以编程方式打开select中的下拉列表

根据，如果我们希望以编程方式指示所选控件打开其下拉列表，则必须向其发送

choosted:open

事件，因此尝试将其添加到上述代码中：

$(document).on 'click', '.box', ->
  $(this).find('input').focus()
  $(this).find('select').trigger('chosen:open')

而且它不起作用。它也没有给出任何错误。然后我注意到，如果我从浏览器的js控制台发出最后一行代码，它就可以工作了（当然，用

.box

元素的引用替换

.this

）。从控制台发出时，该框中相应的select将打开其下拉列表。但是当从上面的click事件处理程序发出时，它不起作用

所以我想我不需要直接在那个上下文中发出这个命令，而是需要使用一些余烬的

Ember.run

函数，比如

Ember.run.next

和其他一些函数。但是我运气不好，我尝试了各种各样的事情，甚至在一个小小的延迟后触发了事件

---

我希望这里有一些具有Ember.js专业知识的人能够对这个问题有所帮助。我假设问题是当ember出现时，因为如果我得到一个没有ember的等价html（来自提供我正在使用的html的前端设计器），那么它也可以从单击事件中完美地工作。

因为您发布的代码与jquery相关，我怀疑它本身并不是一个余烬，而是与从模板/组件获得的DOM元素结构有关。请检查使用余烬（不工作的）和不使用余烬（工作的）得到的确切元素结构。如果可能的话，试着用一个简单的例子发布一篇文章。谢谢你的反馈。只是澄清一下。当我从控制台触发所选select上的

selected:open

事件时，它与ember一起工作，但当我在

.box

元素的click事件处理程序上触发它时，它不起作用。不过，我会按照你的建议在emberjs.jsbin.com中重新创建整个内容，然后更新帖子。

$(document).on 'click', '.box', ->
  $(this).find('input').focus()
  $(this).find('select').trigger('chosen:open')