如何在点击按钮后加载图像？

Question

我有一个

<button>

和

rel="example.jpg"

。我希望按钮在我的

#area

DIV 中加载图像，只是在 after 单击它之后加载，而不是在页面加载时加载。所以我使用这段代码，一切都完成了：

$(document).ready(function(){
$("button").click(function(){
    var imgUrl = $(this).attr('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
});

<button rel="example.jpg">Click Me</button>
<div id="area"></div>

这里是它的jsfiddle。

现在我发现

rel

对于

<button>

无效。

我有兴趣了解其他解决方案来做到这一点，例如使用 jquery

.data()

Answer 1

HTML

<button data-rel="example.jpg">Click Me</button>

jQuery

$("button").click(function () {
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
});

Answer 2

将代码更改为：

$(document).ready(function(){
$("button").click(function(){
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
  });
});

<button data-rel="example.jpg">Click Me</button>
<div id="area"></div>

小提琴：http://jsfiddle.net/x3QdU/4/

Answer 3

改变

<button rel=

到

<button data-rel=

http://jsfiddle.net/x3QdU/1/