Question

我有以下代码，在调用<li>时动态添加addBTS()个元素。点击处理程序使用jQuery .on click事件附加到所有当前和未来的<li>元素：

class Toolbar
  constructor: () ->

    @selected_BTS = undefined
    @bts_dropdown_selecion_clickhandler()

  addBTS: (name) =>
    $('#bts-dropdown').append "<li>#{name}</li>"

  bts_dropdown_selecion_clickhandler: () =>
    $('#bts-dropdown li').on 'click', ->
      console.log $(this).html
      Toolbar.selected_BTS = $(this).html
      $('#bts-display-button').html(@selected_BTS)

对于某些原因，当我点击任何生成的<li>元素时，click事件不会被取消。有谁可以帮我解释为什么这不起作用？谢谢。

Answer 1

on的绑定需要绑定到绑定时的父元素。由于您直接绑定到$('#bts-dropdown li')，因此只能找到静态li。 on的工作方式如下：

$('#bts-dropdown').on('click', 'li', function()
{
});

但如果甚至假设＃bts-dropdown改变了，那么采取安全路线：

$(document).on('click', '#bts-dropdown li', function()
{
});

咖啡脚本中的语法是什么（我认为这是什么？可能想要编辑你的标签以便它能够击中正确的观众），我不确定。但是一旦你弄清楚如何将它放在正确的语法中，这应该可以让你到达你需要的位置。如果其他人以正确的语法提供更正确的解决方案，请随意将其标记为正确答案。只是想帮忙。

我的猜测是：

$('#bts-dropdown').on 'click', 'li', ->

编辑：要解决记录到控制台的新问题，在调用方法html时，您需要()。没有它，它访问名为html的属性（在本例中为函数），然后在其上调用toString。你所看到的是jQuery html函数体。

console.log $(this).html()

使用.on单击以将处理程序附加到将来的<li>单击事件</li>

1 个答案: