使用Dojo为一系列img添加onclick事件答案

【问题标题】：use Dojo to add an onclick event for a series of img使用Dojo为一系列img添加onclick事件
【发布时间】：2016-05-22 02:30:45
【问题描述】：

点击按钮触发LoadImages方法将一系列图片加载到网页中。我想为每张图片添加一个 onclick 事件，因此当用户单击它时，会显示图片名称。如何使用 Dojo 来实现这一点？

LoadImages(PictureNames){
     var resultUl = new Builder('<ul />');
     for (i = 0; i < PictureNames.length; i++){
        resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>');
     }
     dom.byId('Pictures').innerHTML = resultUl;
}

DisplayPictureName(picturename)
{
	dom.byId('PictureName').value = picturename; 
}

<label id="PictureName">here displays picture name</label>
<div id="Pictures"></div>

【问题讨论】：

标签： image dojo

【解决方案1】：

使用dojo/dom-construct 创建元素并使用dojo/on 附加事件。

     var resultUl = domConstruct.create('ul');
     for (i = 0; i < PictureNames.length; i++){
        var image= domConstruct.create('img', {
                            id: PictureNames[i]',
                            src: "./images/"+ PictureNames[i],
                            style: {"height: 200px; width: 250px"},
                            class: "photo"});
        var li= domConstruct.create('li');
        domConstruct.place(li, resultUl);
        domConstruct.place(image, li);
        dojo.on(image, 'click', this.DisplayPictureName());
     }
     dom.byId('Pictures').innerHTML = resultUl;

【讨论】：

谢谢。上述代码的 resultUl 只有
。没有放置其他 img 元素。有什么想法吗？
我能想到的原因只有一个，因为会出现一个空列表，那就是您的 PictureNames 数组是空的。
不知何故，var li= domConstruct.create('li', resultUl);对我不起作用。以下语法有效。 var li = domConstruct,create('li'); domConstruct.place(li, resultUl);
我刚刚发现了另一个问题。加载图像时会自动触发 click 事件。不知道如何解决？
更改为 dojo.on(image, 'click', function(){this.DisplayPicturename()});工作。