twitter bootstrap - appending dynamic buttons to div with jquery -
i'm trying append remove
, submit
buttons submit , remove div's, div's aren't receiving buttons:
<div class="container" style="width:80%"> <div class="panel panel-default"> <div class="panel-heading">image id <div class="btn-group btn-group-sm pull-right"> <div class="btn btn-default submit-button">submit <span class="glyphicon glyphicon-plus"></span> </div> <div class="btn btn-danger remove-button">remove <span class="glyphicon glyphicon-remove-circle"></span> </div> </div> </div> </div>
$(function () { $removebutton = $('<button class="btn btn-default remove">') .text('remove ' + imageid.value).appendto($(".remove-button")) .on('click', function () { panel.remove(); $(this).remove(); return false; }); $submitbutton = $('<button class="btn btn-default submit"></div>') .text('submit ' + imageid.value).appendto($(".submit-button")) .on('click', function () { var saveimage = encodeuricomponent(dataurl); jquery.ajax({ type: "put", url: 'url.com' + imageid.value + "/" + saveimage, //data: json.stringify(data), contenttype: "application/json; charset=utf-8", datatype: "json", success: function (data) { var jsonobj = jquery.parsejson(data); alert(jsonobj); }, failure: function (errormsg) { alert(errormsg); } }); }); });
current implementation: jsfiddle
try:
$(".remove-button").append("<button class='btn btn-default remove'>remove " + imageid.value + "</div>"); $(".submit-button").append("<button class='btn btn-default submit'>submit " + imageid.value + "</div>"); $(document).on('click','.remove', function(){ panel.remove(); $(this).remove(); //or $(this).closest(".panel-heading").remove(); }); $(document).on('click','.submit', function(){ var saveimage = encodeuricomponent(dataurl); jquery.ajax({ type: "put", url: 'url.com' + imageid.value + "/" + saveimage, //data: json.stringify(data), contenttype: "application/json; charset=utf-8", datatype: "json", success: function (data) { var jsonobj = jquery.parsejson(data); alert(jsonobj); }, failure: function (errormsg) { alert(errormsg); } }); });