javascript - 如何检测生成元素的点击？

Question

我正在从 JSON 数据中创建一组元素: 示例:

{
'name':'form',
'elements':[
{'name':'bt1','type':'button','value':'hello','order':'1'},
{'name':'img1','type':'image','value':'http://www.images.com/img.jpg','order':'2'}]
}

我用这个 json 做的是创建一个表单，其中包含“元素”中描述的元素，代码如下:

(我在 mumbo jumbo + jquery 代码中得到了这个草稿)

$('#container').html();//clears the container
for each element in elements do
    switch element.type
          case 'button':
          $('#container').append('<input type="submit" value="'+element.value + ... etc');
          end case
          case 'image':
          insert image bla bla bla
    end switch
end for each

我想检测元素是否被点击或其他类型的 Action ，如鼠标悬停等。如何将其绑定(bind)到元素？ 另外，我如何更新元素而不破坏它们？

编辑:我暗示了一些重要的事情，我的错: 我需要将元素 javascript 对象中的数据与生成的 html 元素链接起来。触发操作时检索的数据字段。这就是所有这一切的关键。

Answer 1

您有两个选择。您可以在创建元素后绑定(bind)监听器，如下所示:

var $input = $('<input type="submit" value="'+element.value + ... etc')
                  .focus(...).blur(...).etc.;

$('#container').append($input);

或者，您可以使用事件委托(delegate)。在初始页面加载时，您可以这样做:

$("#container").on( "focus", "input", function(){...});

这将涵盖 #container 中当前或以后动态添加的所有输入元素。您可以在 on docs 中阅读有关事件委托(delegate)的更多信息.