same effect with jquery

by wales

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body class='container'>
    <div class='col-xs-4'>
        <form role='form'>
            <div class="form-group">
                <label>Your name please</label>
                <input type="text" id='txt_greeting' class="form-control" value="anonymous"/>
                <p id="greeting">Hi , anonymous</p>
            </div>
        </form>
        <div>
            <div id="div_alert"></div>
            <button class='btn btn-default' id="btn_alert">Add Alert</button>
        </div>
    </div>
</body>

CSS

.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

JavaScript

var alerts = 
    [{
        type: 'danger',
        msg: 'danger message'
    }, {
        type: 'success',
        msg: 'success message.'
    }];

$(document).ready(function(){
    $("#txt_greeting").bind("keypress",function(){
        $('#greeting').html('Hi , ' + $("#txt_greeting").val());
    });
    
    $.each(alerts,function(index, Element){
        $("#div_alert").append('<div class="alert alert-' + Element.type + '" >' + Element.msg + '</div>');
    });
    
    $("#btn_alert").bind("click",function(){
       $("#div_alert").append('<div class="alert alert-info" >Another Alert</div>');
    });
    
});