Not able to append the div using click event of jquery
Question
Hello guys I want to dynamically append the div to the div that i click. 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 answers
solution1
3 2015-09-01 09:33:58
There are 3 problems in your code
- You can't have src and contents for an script tag
- Since your script is placed before the elements are loaded, you need to put your script in a dom ready handler
- There is no class called hello in your html
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>
solution2
2 ACCPTED 2015-09-01 09:31:14
Try wrap your jquery code in document.ready like
$(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. So if you want to attach event to all class start withhellouse this:
$(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">
solution3
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 . 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.
You must include jquery library first and then put jquery script in another script tag.
<script src="query.js"></script>
<script>
$(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
</script>
solution4
2 2015-09-01 09:33:14
You need to include jQuery before and for using it. 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> - There is no element with
helloclass in the markup, but you're binding the event on it.
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>
solution5
0 2015-09-01 09:34:43
您的代码中没有.hello类，您可以使用hello1 ， hello2和hello3作为类名，它们都应该只是hello 。
solution6
0 2015-09-01 09:44:28
First of all, in order to use $() selectors you need to include a proper version of jquery. Then, you need to select an element: you have any element with hello class, instead, you have hello1, hello2, and hello3. You could remove the numbers, so all of them will have a hello class. 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. Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.