从 html.append 附加的 html 下拉列表中获取返回值

Question

我正在尝试在对象上的 mouse over 事件上生成动态下拉列表。我就这样完成了，

  canvas.on('mouse:move', function (e) {

      $('body').append("<div id='imageDialog' style='position: absolute; top: 0; left: 0'><select id='mySelect' onchange='copy();'><option value='wipro' >wipro</option><option value='Hcl' >Hcl</option><option value='krystal kones' >krystal kones</option></select></div>");

  });

此功能运行良好。但是在我的下一个需求中有一个问题，当用户从下拉列表中选择一个项目时，我需要捕获所选项目。我知道这是一个很长的镜头，但我通过在下拉菜单中添加onchange='copy();' 并提醒做出的选择来尝试它，

function copy(){
    alert(document.getElementById("imageDialog").value);
}

但正如预期的那样，它给出了错误Uncaught ReferenceError: copy is not defined。

我在这方面已经有一段时间了，但没有任何运气，我非常感谢各位专家对此提供的任何帮助。

谢谢。

Answer 1

我不确定我是否理解其中的一些设计决策（生成选择框是一种奇怪的下拉菜单方式），但我们现在将跳过这部分并开始讨论好东西。

当您在初始加载后向 DOM 添加新元素时，您需要稍微不同地考虑事件绑定。由于当你第一次说“嘿，当我将鼠标悬停在你身上时所有元素都会这样做”时，这些初始元素并不存在，所以你处理它的方式是告诉父元素。坚持使用 jQuery 领域：

$('.parent-element').on('click', '.child-element', function (){ });

如果在初始渲染时它就在附近，这与将点击直接分配给.child-element 的结果相同。您可以在此处阅读有关委托事件的更多信息：http://api.jquery.com/on/

这是一个可以稍微清理你的东西的小提琴：http://jsfiddle.net/g6r8k6dk/1/

Answer 2

不使用纯javascript，使用jQuery，如下代码。

$('document').ready(function(){
   $('#imageDialog').on('click',function(){
       alert($('#imageDialog select').value);
   })
})