CODEWITHSUNDEEP
javascriptjqueryhtml
PalakM
PalakM

Reputation: 321

Overlay div via jquery is set up successfully but not removed on click

I have one simple jquery script which triggers on click on button and create another div overlays on current html,i got success creating the div but the problem is when i try to close the div by a button which i have created at setting up overlay div is not working what can be the possible cause? the code is as under

input#btn cause the div to diplay and its working fine.

  1. Jquery function file

    $(document).ready(function(){
$('input#btn').click(function(){
    var attr = $('#div').css('display');
    alert(attr);
    if(attr == 'none')
    {
        $('#div').css('display','block');
        $('#div').html('<H1>PALAK MEVADA</H1><input id="close" type="button" value="CLOSE"/>');
    }
    return false;
});

$('input#close').click(function(){

    var attr = $('#div').css('display');
    alert(attr);
    if(attr == 'block')
    {
        $('#div').css('display','none');
        $('#div').html('');
    }
    return false;
});
});

Upvotes: 0

Views: 532

Answers (2)

LarsBar
LarsBar

Reputation: 41

The button doesn't exist when your code is first initialized, so your $('input#close').click(); isn't bound to anything.

Try this:

$('input#close').on('click', function(){
 // Your code here...
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

Use on():

$(document).on('click','input#close',function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
    $('#div').css('display','none');
    $('#div').html('');
}
return false;
});

Upvotes: 0

Related Questions