CODEWITHSUNDEEP
javascriptjqueryhtml
Sumanth Udupa
Sumanth Udupa

Reputation: 91

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. 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

Upvotes: 0

Views: 215

Answers (6)

thetailor.de
thetailor.de

Reputation: 312

There is no .hello class in your code, you use hello1, hello2 and hello3 as classnames, they should all just be hello.

Upvotes: 0

Manwal
Manwal

Reputation: 23816

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 hello class to bind click event your it doesn't present in your HTML. So if you want to attach event to all class start with hello use this:

$(document).ready(function(){
    $('div[class^="hello"]').click(function(){
        $(this).append('<div>I am the new one</div>');
    }); 
});

DEMO

Instead of this

<script src="query.js"> //don't use src here

Use:

<script type="text/javascript">

Upvotes: 2

graham o&#39;donnel
graham o&#39;donnel

Reputation: 395

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!

Upvotes: 0

Tushar
Tushar

Reputation: 87203

  1. 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>

  2. You cannot load script and define script inside it. So, following is not valid

    <script src="query.js">$('.hello')...</script>
  3. Use ready() or DOMContentLoaded event or move the script to the bottom of <body>
  4. There is no element with hello class 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>

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

There are 3 problems in your code

  1. You can't have src and contents for an script tag
  2. Since your script is placed before the elements are loaded, you need to put your script in a dom ready handler
  3. 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>

Upvotes: 3

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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>

Upvotes: 2

Related Questions