jquery - Button Not Responding On Click To Remove Element -
i'm backend developer , don't on front end, have major project responsible end end. such, i'm trying use twitter bootstrap , jquery finding myself stuck when trying remove list item created using jquery. feel missing obvious can't figure out is.
here code, remove order section 1 doesn't when button clicked -- nothing @ seems happen:
edit: couldn't jsfiddle play nice, i've added html here code. either inline (as test file) or called via cdn.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- le styles --> <!-- html5 shim, ie6-8 support of html5 elements --> <!--[if lt ie 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- fav , touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="ico/favicon.png"> <link rel="stylesheet" href="js/prettycheckable/prettycheckable.css"> <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" /> <link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.5.0/jquery.selectboxit.css" /> <script src="js/prettycheckable/prettycheckable.js"></script> <script> $().ready(function(){ $('input.fancycheckbox').prettycheckable(); //calls selectboxit method on html select box. $("select").selectboxit({ theme: "bootstrap", showfirstoption: false }); $(".poptip").popover({ trigger: "hover" }); $(".inputpopover").popover({ trigger: "focus" }); $(".tip").tooltip(); // add order button click code $('#idsp-test').keyup(function () { // console.log(this.value); if(parseint(this.value) > 0) { $('#btn-idsp-add').show(); } else { $('#btn-idsp-add').hide(); } }); $("#btn-idsp-add").on('click', function(){ $("#addons_list").append('<li id="idsp-addon-list-item"><i class="icon-ok"></i> ' + $('#idsp-test').val() + ' idsp <button class="btn btn-mini btn-danger" id="btn-idsp-remove" type="button">remove order</button></li>'); // hide button after adding sidebar $('#btn-idsp-add').fadeout('slow'); }); // remove order buttons $('#btn-idsp-remove').on('click',function(){ $('#idsp-test').val('0'); $('#idsp-addon-list-item').remove(); }); }); </script> <style type="text/css"> .selectboxit-container .selectboxit-options { /* set's drop down options width same width drop down button */ width: 210px; /* set's max-height property show subset of drop down items. if not set max-height property, selectboxit dynamically position dropdown (when opened) make sure drop down items not displayed outside of current window viewport. */ max-height: 240px; } #btn-idsp-add, #btn-county-crim-add { display: none; } </style> </head> <body> <div class="container-fluid"> <h1>package , addon selection</h1> <div class="container-fluid"> <div class="row-fluid"> <div class="span4"> <form action="index.cfm" method="post" enctype="multipart/form-data"> <legend>package selection</legend> <div class="control-group"> <div class="controls"> <select id="package_select" name="package_select" class="package_selection"> <option>basic packages</option> <option data-selectedtext = "standard smartpak selected" data-content="standard smartpak" value="standard">standard smartpak</option> <option data-selectedtext = "advanced smartpak selected" data-content="advanced smartpak" value="advanced">advanced smartpak</option> </select> </div> <div class="alert alert-success" style="margin-top: 6px; box-shadow: 0 0 2px"> <h5>this package includes:</h5> <ul class="unstyled"> <li><i class="icon-ok"></i> one</li> <li><i class="icon-ok"></i> two</li> <li><i class="icon-ok"></i> three</li> </ul> </div> <hr> <div id="addons_list_box" class="alert alert-info" style="box-shadow: 0 0 2px"> <h5>additional addon items:</h5> <ul class="unstyled" id="addons_list"></ul> </div> </div> </div> <div class="span8"> <fieldset> <!-- form name --> <legend>order add ons</legend> <!-- multiple checkboxes --> <div class="control-group"> <div class="controls controls-row"> <div class="input-wrapper form-inline"> <label for="idsp-test">idsp <input type="text" class="mini inline inputpopover" title="additional idsps" data-content="enter number 1 10 add order. set 0 , click button remove or change." data-placement="top" id="idsp-test" name="idsp-test" placeholder="add quantity 1 10." value="" autocomplete="off" /> <button class="btn btn-success" type="button" id="btn-idsp-add"><i class="icon-plus icon-white"></i> add/update order</button> </label> </div> </div> <div class="controls controls-row"> <div class="input-wrapper form-inline"> <label for="county-crim-test">county criminal search <input type="text" class="mini inline inputpopover" title="additional county criminal searches" data-content="enter number 1 10 add order. set 0 , click button remove or change." data-placement="top" id="county-crim-test" name="county-crim-test" placeholder="add quantity 1 10." value="" autocomplete="off" /> <button class="btn btn-success" type="button" id="btn-county-crim-add"><i class="icon-plus icon-white"></i> add/update order</button> </label> </div> </div> <!-- button --> <div class="control-group"> <label class="control-label"></label> <div class="controls"> <input name="submit" type="submit" class="btn btn-primary" id="submit" title="submit form" value="place order" data-toggle="tooltip" data-content="submit form" /> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> <!-- /container --> <!-- le javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.5.0/jquery.selectboxit.min.js"></script> <script src="js/prettycheckable/prettycheckable.js"></script> </body> </html> can tell me i've done wrong?
thanks!
even though kind of defeats point of ".on", try changing click event this:
// remove order buttons $(document).on('click', '#btn-idsp-remove', function(){ $('#idsp-test').val('0'); $('ul').find('#idsp-addon-list-item').remove(); //assumes using "ul" list , not "ol" }); and jsfiddle go it.
Comments
Post a Comment