javascript - Jquery 不使用 bootstrap 4 触发 onchange

Question

我有有效的代码:

<div id="type" class="btn-group" data-toggle="buttons">
    <label class="btn btn-outline-primary" id="type0">
        <input id="type0" name="op" type="radio" value="0" />Wholesale</label>
    <label class="btn btn-outline-primary" id="type1">
        <input id="type1" name="op" type="radio" value="1" />Retail</label>
</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
jQuery(function ($) {
    $(document).on('change', 'input:radio[id^="type"]', function (event) {
        alert("click fired");
    });
});
</script>

这可以在http://118.127.41.41/~emmarkho1/calculator/test.html处看到

我已将此代码集成到我正在构建的计算器中，但它拒绝在更改时触发。

完整源代码可见@ http://118.127.41.41/~emmarkho1/calculator/

任何帮助将不胜感激。

Answer 1

查看以下内容希望对您有所帮助。

$(document).ready(function() {
    $('input[type=radio][name=op]').change(function() {
	<!-- event.preventDefault(); -->
        alert("click fired");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">


<div class="container">
	<div class="row">
		<div class="col-xl-8">
			<form name="corflute" id="corflute" action="" method="post">
			<div class="form-group row">
				<label class="col-sm-3 col-form-label">Customer Type</label>
				<div class="col-sm-9">
				
			<div id="type" class="btn-group" data-toggle="buttons">
    <label class="btn btn-outline-primary" id="type0">
        <input id="type0" name="op" type="radio" value="0" />Wholesale</label>
    <label class="btn btn-outline-primary" id="type1">
        <input id="type1" name="op" type="radio" value="1" />Retail</label>
    </div>

				
				
					<!-- <div class="btn-group" data-toggle="buttons">
						<label class="btn btn-outline-primary id="type1" ">
							<input type="radio" value="0" name="type" id="type1" autocomplete="off"  >Wholesale
						</label>
						<label class="btn btn-outline-primary id="type2" active">
							<input type="radio" value="1" name="type" id="type2" autocomplete="off" checked >Retail
						</label>					
					</div> -->
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-3 col-form-label label-top">Size<br><span class="label-info">metres</span></label>
				<div class="col-sm-3">
					<label class="center">Width</label>
					<input class="form-control" type="text" onChange='this.form.submit();' name="width" id="width" value="">
				</div>
				<div class="col-sm-3">
					<label class="center">Height</label>
					<input class="form-control" type="text" onchange='myfuction();' name="height" id="height" value="">
				</div>
				<div class="col-sm-3">
					<label class="center">Quantity</label>
					<input class="form-control" type="text" name="quantity" id="quantity" value="1">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-6 col-form-label top">Signs per sheet<br><span class="label-info">sheet size 2440mm x 1220mm</span></label>
				<div class="col-sm-3">
					<input class="form-control" type="text" name="sps" id="sps" value="1">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-3 col-form-label">Artwork</label>
				<div class="col-sm-9">
					<div class="btn-group" data-toggle="buttons">
						<label class="btn btn-outline-primary active">
							<input type="radio" value="0" name="artwork" id="art1" autocomplete="off">Basic
						</label>
						<label class="btn btn-outline-primary ">
							<input type="radio" value="1" name="artwork" id="art2" autocomplete="off">Standard
						</label>
						<label class="btn btn-outline-primary  ">
							<input type="radio" value="2" name="artwork" id="art3" autocomplete="off">Complex
						</label>
					</div>
				</div>
			</div>
			<div class="form-group row">
				<button type="submit" name="corflute" class="right btn btn-warning">Calculate</button>
			</div>
			</form>
			<div class="divider"></div>                        
		</div>
		<div class="col-xl-4">
			<div class="col-md-12 right-sidebar">
				<div class="side-blocks">
					<form name="CorfluteSettings" id="CorfluteSettings" action="" method="post">
					<input type="submit" name="Settings" style="visibility: hidden;" />
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Substrate Cost<br><span class="label-info">Per Square Metre</span></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="subcost" id="subcost" onchange="javascript:document.forms['CorfluteSettings'].submit()"  value="5.5">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Mark-up<br><span class="label-info">Default 250%</span></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="submu" id="submu" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="250">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Substrate rate<br><span class="label-info">Per Square Metre</spane></label>
						<div class="col-xs-4">
							<input disabled class="form-control" type="text" name="subrate" id="subrate" value="19.25">
						</div>
					</div>
				</div>
				<div class="side-blocks">
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Print Media Cost<br><span class="label-info">Per Square Metre</span></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="pmc" id="pmc" onchange="javascript:document.forms['CorfluteSettings'].submit()"  value="4.5">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Solvent Ink Cost<br><span class="label-info">Per Square Metre</span></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="sic" id="sic" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="5">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Mark up<br><span class="label-info">default 250%</spane></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="printmu" id="subrate" value="250">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Print Rate<br><span class="label-info">Per Square Metre</spane></label>
						<div class="col-xs-4">
							<input disabled class="form-control" type="text" name="printrate" id="printrate" value="33.25">
						</div>
					</div>
				</div>
				<div class="side-blocks last">
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Mount Time<br><span class="label-info">Per Panel(mins)</span></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="mt" id="bt" onchange="javascript:document.forms['CorfluteSettings'].submit()"  value="15">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Track Time<br><span class="label-info">Per Cut(mins)</span></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="tt" id="tt" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="2">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-xs-8 col-form-label top">Hourly Rate<br><span class="label-info">Dollars Per hour</spane></label>
						<div class="col-xs-4">
							<input class="form-control" type="text" name="hr" id="hr" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="110">
						</div>
					</div>
					</form>
				</div>
				
			</div>
		</div>
	</div>
</div>