加载图像按钮，jquery不'；行不通

我以前从未使用过jquery，所以我可能忘记了一些东西。 我想做的是在我的页面上添加一个按钮，按下按钮时可以加载一些图像。甚至让它加载一个我已经创建的div

我的头牌上有这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $("button").click(function () {
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
  });
</script>

$（“按钮”）。单击（函数（）{
var imgUrl=$（this.data（'rel'）；
$（“#面积”）.html（“”）；
});

在我的身体里我有按钮

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

点击我

---

请帮我的忙，等我有时间的时候我会学习一点jquery，但现在我只需要学习如何使用在web上找到的代码。

jquery不能在文档完全加载之前运行。因此：

将jQuery代码包装在其中

$(document).ready(){ //your jQuery here });

那么它应该会起作用；）

$（文档）.ready（）{
$（“按钮”）。单击（函数（）{
var imgUrl=$（this.data（'rel'）；
$（“#面积”）.html（“”）；
});
});

您的代码工作正常。您只需将其包装在

$（document.ready（）

所以它应该看起来像：

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

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var imgUrl=$（this.data（'rel'）；
$（“#面积”）.html（“”）；
});
});

---

下面是添加脚本在html中很容易的一个例子，但是请先看看这些脚本使用了什么，如果您的脚本使用了任何dom元素，那么该脚本块应该在该dom元素之后执行。 比如，如果在主体之前编写一个click事件处理程序，并且按钮位于主体中，那么该处理程序将不会附加到该按钮。在jQuery中有$（document）.ready（）方法，它接受一个回调函数，该函数将在加载文档时执行

所以这里你有两个选择一个是使用

$(document).ready(function(){
//Your code here
})

---

或者另一个选项是将脚本块移动到body标记的末尾，以便在执行脚本块时，直到所有dom元素都已加载为止

将您的代码包装在里面，在整个HTML完成后添加您的代码。谢谢，我在看了您的演示后使其正常工作；）非常感谢。我成功了；）如果我想让它加载一个div呢？：）然后将div放入html中（“此处为div-html-inside”）。

$(document).ready(function(){
//Your code here
})