Bootstrap Button dynamically through Jquery

Question

I need to add button dynamically to the div , the button value is retrieved from var data = ev.dataTransfer.getData("Text");

So , Please suggest me the solution

<div class="span12" id="btndiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
   // Add Button here to div -btndiv

 <button class="btn btn-danger" data-jqui-type="" name="" type="submit"><i class="icon-close icon-white"></i> **data**</button>
    }

You want to add the button or just give the existing button a value? — DevlshOne
– DevlshOne, Commented Jul 16, 2013 at 16:19

tymeJV · Accepted Answer · 2013-07-16 16:13:32Z

1

You can do:

$("<input/>").attr({type: "button", value: data}).appendTo("#btndiv");

answered Jul 16, 2013 at 16:13

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ineffable p Over a year ago

How can I add CSS for this one

tymeJV Over a year ago

Add a class to this, and create a CSS class, example CSS class of test, then .attr({"class":"test"})

adeneo · Accepted Answer · 2013-07-16 16:20:26Z

0

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text"),
        btn  = $('<button />', {'class':'btn btn-danger', 
                                 text: data,
                                 name: '',
                                 type: 'submit',
                                'data-jqui-type':''
                               }),
          i  = $('<i />', {'class':'icon-close icon-white'});

    $('#btndiv').append(btn.prepend(i));
}

answered Jul 16, 2013 at 16:20

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

ineffable p Over a year ago

i = $('<i />', {'class':'icon-close icon-white'} is not adding to the button

adeneo Over a year ago

@ineffablep - It does add the icon, but there is no icon-close as far as I know. Changing the icon class makes it work -> jsfiddle.net/b4Dj5

adeneo Over a year ago

Here are all the available icons and their names -> twitter.github.io/bootstrap/base-css.html#icons

Collectives™ on Stack Overflow

Bootstrap Button dynamically through Jquery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related