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

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

不使用纯 javascript，像下面的代码那样使用 jQuery。

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

Answer 2

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

当您在初始加载后向 DOM 添加新元素时，您需要稍微不同地考虑事件绑定。因为当你第一次说 "Hey, all elements do this when I hover on you" 时这些初始元素不存在，你处理它的方式是通过告诉父元素来代替。坚持 jQuery-土地：

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

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

这里有一个 fiddle 可以稍微清理一下你的东西：http://jsfiddle.net/g6r8k6dk/1/

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

Get return value from html dropdown appended from html.append

javascript

jquery

html

drop-down-menu

onchange