JQuery event binding is not working on newly created elements

Question

I am creating some <div> elements for my chat box application. The following is the HTML part, in which on clicking a button the <div> elements are created.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../chat/style.css"/>
</head>
<body>
  <h1>Jquery div example</h1>
  <button><i>click to create div</i></button>
</body>
</html>

The creation of <div> elements seems OK. But I am unable to do anything on the created box.

This is the JQuery code for creating the div:

$(document).ready(function(){
    var chat_box_title = 'jaya chandra';
    $("button").click(function(){
        $('<div/>')
            .attr({id:'chat_box_'+chat_box_title})
            .addClass('chat_box')
            .html('<div class="chat_head">jaya chandra<span class="chat_close"><a class="chat_close" href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chat_box_title+'\')">X</a></span></div><div class="chat_wrapper"><div class="chat_body"></div><div class="chat_footer"><textarea rows="4" placeholder="Your message here..." class="chat_input"></textarea></div></div>')
            .appendTo('body');      
    });    
});

When the class .chat_head is clicked then the .chat_wrapper has to toggle. I am trying to bind the click function using the following code..

$('body').on('click','div.chat_head>div.chat_wrapper',function(){
    //$('.chat_wrapper').slideToggle('slow');
    console.log('clicked');
});

I have tried all of my ideas for it, but I am unable to solve the problem.

`div.chat_head` doesn't have a child `div.chat_wrapper`, they're siblings — billyonecan, Feb 23 '16 at 08:14

BenG · Answer 1 · 2016-02-23T09:15:01.847

0

Here is your rendered HTML:-

<div class="chat_head">jaya chandra
  <span class="chat_close">
  <a class="chat_close" href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chat_box_title+'\')">X</a>
  </span>
</div>
<div class="chat_wrapper">
  <div class="chat_body"></div>
  <div class="chat_footer">
    <textarea rows="4" placeholder="Your message here..." class="chat_input"></textarea>
  </div>
</div>

so as div.chat_head and div.chat_wrapper are siblings, and you put all into a div with the class chat_box, try:-

$('body').on('click','div.chat_box>div.chat_wrapper',function(){

   console.log('clicked');

});

edited Feb 23 '16 at 09:15

answered Feb 23 '16 at 08:19

BenG

14,826
5
45
60

I had the whole code you presented inside a div. My code creates a div with a class name `chat_box` which contains the rendered HTML. – jaya chandra Feb 23 '16 at 08:55
I've updated the answer. didn't notice the `chat_box` at first. – BenG Feb 23 '16 at 09:15

score 0 · Accepted Answer · answered Feb 23 '16 at 08:19

0

Just remove >div.chat_wrapper from this.

$('body').on('click','div.chat_head',function(){
  $('.chat_wrapper').slideToggle('slow');
  console.log('clicked');
});

Working JSFiddle here https://jsfiddle.net/6wszffh8/

answered Feb 23 '16 at 08:19

thank u for the help... It's working. – jaya chandra Feb 23 '16 at 08:52

score 0 · Answer 3 · answered Feb 23 '16 at 08:19

Your HTML is wrong. You have a script tag outside of your HTML tag? It should be within the HEAD or at the bottom of your BODY.

<html>
<head>
<link rel="stylesheet" type="text/css" href="../chat/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">     </script>
</head>
<body>
<h1>Jquery div example</h1>
<button><i>click to create div</i></button>
</body>
</html>

With your click binding, you are targetting the wrong element. Your click binding should look like this.

$(document).on('click', 'div.chat_wrapper', function(){
    // $('.chat_wrapper').slideToggle('slow');
    console.log('clicked');
});

oops! i didn't see that. that's helpful – jaya chandra Feb 23 '16 at 08:53 — jaya chandra, Feb 23 '16 at 08:53

JQuery event binding is not working on newly created elements

3 Answers3