Question

我之前从未使用过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>

在我的身体里，我有按钮。

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

请帮助我，在我有空的时候去学习一点jquery，但是现在我只需要学习如何使用网络上的代码。

Answer 1

jQuery无法在文档完全加载之前运行。因此：

将您的jQuery代码包装在

中

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

然后它应该工作;）

Answer 2

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

Answer 3

您的代码运行正常。您需要做的就是将其包装在$(document).ready()

中

所以看起来应该是这样的：

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

以下是DEMO

Answer 4

在html中添加脚本很容易，但是看看这些脚本使用的是什么，如果你的脚本使用任何dom元素，那么脚本块应该在那个dom元素之后执行。就像你在body和button在body中之前编写一个click事件处理程序一样，处理程序将不会附加到该按钮。在jQuery中有$（document）.ready（）方法，该方法接受一个回调函数，该函数将在文档加载时执行。

所以这里有两个选项，一个是使用

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

或其他选项是在body标记的末尾移动脚本块，以便在执行脚本块时，直到所有dom元素都已加载

加载图像按钮，jquery不起作用

4 个答案: