私は通常、バックエンドの開発者であり、フロント エンドにはあまり関与しませんが、エンド ツー エンドの責任を負う主要なプロジェクトがあります。そのため、Twitter Bootstrap と jQuery を使用しようとしていますが、jQuery を使用して以前に作成したリスト アイテムを削除しようとすると、スタックしてしまいます。明らかな何かが欠けているように感じますが、それが何であるかわかりません。
コードは次のとおりです。Remove From Order セクションは、ボタンがクリックされたときに何もしないセクションです。何も起こらないようです。
編集: Jsfiddle をうまく再生できなかったので、コードと共に HTML をここに追加しました。すべてがインライン (これはテスト ファイルであるため) であるか、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, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and 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 the selectBoxIt method on your HTML select box.
$("select").selectBoxIt({
theme: "bootstrap",
showFirstOption: false
});
$(".poptip").popover({ trigger: "hover" });
$(".inputpopover").popover({ trigger: "focus" });
$(".tip").tooltip();
// Add To 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 From Order</button></li>');
// Hide Button After Adding to Sidebar
$('#btn-idsp-add').fadeOut('slow');
});
// REMOVE FROM 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 the drop down options width to the same width as the drop down button */
width: 210px;
/* Set's the max-height property to only show a subset of the drop down items.
If you do not set a max-height property, SelectBoxIt will dynamically
position the dropdown (when opened) to make sure the drop down items are not
displayed outside of the current window viewport.
*/
max-height: 240px;
}
#btn-idsp-add, #btn-county-crim-add {
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Package and 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 a number from 1 to 10 to add to your order. Set to zero and click the button to remove or change." data-placement="top" id="idsp-test" name="idsp-test" placeholder="Add a Quantity from 1 to 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 a number from 1 to 10 to add to your order. Set to zero and click the button to remove or change." data-placement="top" id="county-crim-test" name="county-crim-test" placeholder="Add a Quantity from 1 to 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 the Form" value="Place My Order" data-toggle="tooltip" data-content="Submit The Form" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the 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>
誰かが私が間違ったことを教えてもらえますか?
ありがとう！