无法使用jQuery的click事件附加div
[英]Not able to append the div using click event of jquery
问题描述
Hello guys I want to dynamically append the div to the div that i click. 
大家好，我想将div动态添加到我单击的div上。 Here is the code 这是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="query.js">
$('.hello').click(function(){
$(this).append('<div>I am the new one</div>');
});
</script>
</head>
<body>
<div class="hello1">Hello guys</div>
<div class="hello2">Hiiiiiiii</div>
<div class="hello3">Awesome</div>
</body>
</html>
Can anyone tell me whats the issue with my code 谁能告诉我我的代码有什么问题
6 个解决方案
解决方案1
3 2015-09-01 09:33:58
There are 3 problems in your code 您的代码中有3个问题
- You can't have src and contents for an script tag 您没有脚本标记的src和内容
- Since your script is placed before the elements are loaded, you need to put your script in a dom ready handler 由于脚本是在元素加载之前放置的，因此您需要将脚本放入dom准备就绪的处理程序中
- There is no class called hello in your html 您的html中没有名为hello的类
so 所以
<div class="hello">Hello guys</div>
<div class="hello">Hiiiiiiii</div>
<div class="hello">Awesome</div>
<script src="query.js"></script>
<script>
jQuery(function ($) {
$('.hello').click(function () {
$(this).append('<div>I am the new one</div>');
});
})
</script>
解决方案2
2 已采纳 2015-09-01 09:31:14
Try wrap your jquery code in document.ready like 尝试将您的jquery代码包装在document.ready
$(document).ready(function(){ // this will execute when DOM is ready
//your code
$('.hello1').click(function(){ //updated class name
$(this).append('<div>I am the new one</div>');
});
})
As i can see you are using
helloclass to bind click event your it doesn't present in your HTML.hello类绑定单击事件，但它不会出现在HTML中。 So if you want to attach event to all class start withhellouse this:hello开头的类，请使用以下命令：
$(document).ready(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
Instead of this 代替这个
<script src="query.js"> //don't use src here
Use: 采用：
<script type="text/javascript">
解决方案3
2 2015-09-01 09:33:08
Try this : You don't have div with class="hello" but class which starts with hello viz hello1 , hello2 , hello3 . 试试这个：您没有div带有class="hello"但该类以hello hello3 hello1 ， hello2和hello3 。 Hence use start with selector as shown below. 因此，使用如下所示的选择器开始。 Also put your code inside $(document).ready(function... or $(function(){... so that it will ensure DOM is ready and will attach click event handler. 还将您的代码放在$(document).ready(function...或$(function(){...中，以确保DOM准备就绪并附加单击事件处理程序。
You must include jquery library first and then put jquery script in another script tag. 您必须首先包括jquery库，然后将jquery脚本放入另一个脚本标签中。
<script src="query.js"></script>
<script>
$(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
</script>
解决方案4
2 2015-09-01 09:33:14
You need to include jQuery before and for using it.
您需要先包含jQuery，然后才能使用它。 Use 采用 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>You cannot load script and define script inside it.
您无法加载脚本并在其中定义脚本。 So, following is not valid 因此，以下无效 <script src="query.js">$('.hello')...</script>- Use
ready()orDOMContentLoadedevent or move the script to the bottom of<body>使用ready()或DOMContentLoaded事件或将脚本移到<body>的底部 - There is no element with
helloclass in the markup, but you're binding the event on it.标记中没有带有hello类的元素，但是您将事件绑定在其上。
Code: 码：
<script src="query.js"></script>
<script>
$(document).ready(function() {
$('.hello').click(function() {
$(this).append('<div>I am the new one</div>');
});
});
</script>
Demo 演示版
$(document).ready(function() { $('.hello').click(function() { $(this).append('<div>I am the new one</div>'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="hello">Hello guys</div> <div class="hello">Hiiiiiiii</div> <div class="hello">Awesome</div>
解决方案5
0 2015-09-01 09:34:43
您的代码中没有.hello类，您可以使用hello1 ， hello2和hello3作为类名，它们都应该只是hello 。
解决方案6
0 2015-09-01 09:44:28
First of all, in order to use $() selectors you need to include a proper version of jquery. 首先，为了使用$（）选择器，您需要包括正确版本的jquery。 Then, you need to select an element: you have any element with hello class, instead, you have hello1, hello2, and hello3. 然后，您需要选择一个元素：您拥有hello类的任何元素，而是具有hello1，hello2和hello3。 You could remove the numbers, so all of them will have a hello class. 您可以删除数字，因此所有数字都将具有hello类。 And finally, because these elements doesn't exist when the js code is executed, you need to wrap your code within a document ready event, or move it to the end of your html body tag. 最后，由于执行js代码时这些元素不存在，因此您需要将代码包装在文档就绪事件中，或将其移到html body标签的末尾。 Good luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.