jqeruy click function doesnt work

[phoenix254]

Hi everyone,

why my 2nd,3rd,4th line arent working in js source ?

$(document).ready(function(){
$('.cls').click(function(){
$('.mwindow').hide();
});

$('.frnd').on('click', function(){
var name=$(this).attr("id");

    var div_mwindiow = document.createElement('div');
    var div_hwindiow = document.createElement('div');
    var span_hwindiow = document.createElement('span');
    div_mwindiow.className ="mwindow";
    div_hwindiow.className ="hwindow";
    span_hwindiow.className ="cls";
    var x = document.createTextNode('x');

    span_hwindiow.appendChild(x);
    div_hwindiow.appendChild(span_hwindiow);
    var t = document.createTextNode(name);

    div_hwindiow.appendChild(t);
    div_mwindiow.appendChild(div_hwindiow);
    document.body.appendChild(div_mwindiow); 
    //div_mwindiow.appendChild(div_hwindiow);


});
});


body{
margin:0;
background-color:#999;
height:700px;
}
.frnd{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}

<span id="Maxi" class="frnd">Maxi</span><br/>
<span id="John" class="frnd">John</span><br/>
<span id="Henry" class="frnd">Henry</span><br/>
<span id="Max"  class="frnd">Max</span><br/>
<span id="Simon" class="frnd">Simon</span><br/>

[Aeonix]

$('.cls').click(function(){
    $('.mwindow').hide();
});

I don't see .cls nor .mwindow to begin with. Could you share more code? Maybe there is something in the code that you're not showing us.

Also, be sure to include jQuery and have JavaScript enabled.

[diafol]

He's creating them dynamically from the 'frnd' click event.

The code is confusing. You start off with jQuery then get into vanilla js. Nothing wrong with that maybe, but naming is a little unconventional:

'mwindiow' and 'mwindow'

This:

$('.cls').click(function(){
    $('.mwindow').hide();
});

Won't work as .cls does not exist until after .frnd is clicked. Therefore, you must delegate it to another existing element (container).
So this may worK:

<div id="friends">
    <span id="Maxi" class="frnd">Maxi</span><br/>
    <span id="John" class="frnd">John</span><br/>
    <span id="Henry" class="frnd">Henry</span><br/>
    <span id="Max"  class="frnd">Max</span><br/>
    <span id="Simon" class="frnd">Simon</span><br/>
</div>

The modified .cls click:

$('#friends').on('click','.frnd', function(){
    $('.mwindow').hide();
});

Not sure whether you can multiple .mwindow available, but if you can then the js above with hide ALL instances of .mwindow

ALso there's a lot of messing about with creating and populating nodes and such. I suppose this is the js way of doing it, but wouldn't this be easier?

<ul id="friends">
    <li id="Maxi" class="frnd">Maxi</li>
    <li id="John" class="frnd">John</li>
    <li id="Henry" class="frnd">Henry</li>
    <li id="Max"  class="frnd">Max</li>
    <li id="Simon" class="frnd">Simon</li>
</ul>
<div id="windows"></div>

Obviously style the ul/li to your liking. Also using name as a variable name can cause problems, so change it.
And I may be shot down for this:

$('.frnd').click(function(){
    var id = $(this).attr("id");
    $html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>
    $('#windows').append($html);
});

Not sure about the output of the html above as I got a bit lost in your code.

[phoenix254]

@Aoenix
This is all code .cls is created by js when user click on one of these span

    <span id="Maxi" class="frnd">Maxi</span><br/>
    <span id="John" class="frnd">John</span><br/>
    <span id="Henry" class="frnd">Henry</span><br/>
    <span id="Max"  class="frnd">Max</span><br/>
    <span id="Simon" class="frnd">Simon</span><br/>

[phoenix254]

@diafol
Your code work but that .cls doesnt working
Live code
i check in inspect elements
style is none instead block.

[phoenix254]

i trying to make chat windows like facebookchatwindow(when user click on his frnd and then ther appear small window in right bottom) that can be dragable. here are my Live Code
1
Do u have any idee how can i create it ?

[Vivek_13]

$(document).on('click','classname or id', function(){
        //your code     
    });