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

我不确定我是否了解其中一些设计决策（生成选择框是一种奇怪的方式来执行下拉菜单）但我们现在暂时跳过这部分并获得好处。< / p>

在初始加载后向DOM添加新元素时，需要考虑事件绑定的不同。因为当你第一次说'嘿时，这些初始元素并没有出现，所有元素都是在我徘徊在你身上时做到这一点，你处理它的方式是告诉父元素。坚持jQuery-land：

$('.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);
   })
})

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

2 个答案: