Click event doesnt fire - multiple buttons
I reference a js file that will contain some logic when an user clicks a button and there is multiple buttons on the page with the same name. I use alert for testing, but it never fires when clicked.
Html:
TagHelper.BuyButton.js:
What am I doing wrong?
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smokers | Rullepapir</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link href="/CSS/bootstrap.styles.css" rel="stylesheet" />
<link href="/CSS/styles.css" rel="stylesheet" />
<link rel="shortcut icon" href="/Graphic/fav-icon.png" />
<script src="https://use.fontawesome.com/190339a117.js"></script>
<script src="/SCRIPTS/TagHelper.BuyButton.js" type="text/javascript"></script>
</head>
<body style="background: url('/Graphic/bg.jpg') no-repeat center center fixed;background-size: cover;">
<style type="text/css">
.lc-local-thumb {
height: 182px;
}
</style>
<link href="~/CSS/styles.BuyButton.css" rel="stylesheet" />
<section>
<h1 style="margin:22px;margin-left:0px;">Rullepapir</h1>
<h3 style="margin:20px;margin-left:10px;">
Stort utvalg rullepapir
</h3>
<div style="display:flex;flex-wrap:wrap;flex-shrink:8;justify-content:space-around;">
<div class="lc-presentation-container" style="height:270px;">
<a href="/Shop/Item/1">
<img src="/Graphic/Illustration/scale.png" class="img-responsive lc-local-thumb" style="position:relative;top:-4px;" />
</a>
<div style="position:relative;top:-12px;">
<a href="/Shop/Item/1">
<h5>
<span source="Navn på norsk som er ganske langt"></span>
</h5>
</a>
<div>
<div style="width:100%;">
<div id="buyButtonWrapper" class="lc-local-button-wrap">
<input type="text" id="TextCount" style="width:36px;text-align:center;position:relative;top:2px;margin-right:2px;" value="1" />
<button id="buyButton" type="submit" class="btn btn-danger"><i class="fa fa-cart-plus" aria-hidden="true" style="font-weight:bold;font-size:22px;"></i></button>
</div>
<div id="buyButtonDoneWrapper" class="lc-local-button-wrap" style="display:none;">
DONE!
</div>
</div></div>
</div>
</div>
<div class="lc-presentation-container" style="height:270px;">
<a href="/Shop/Item/2">
<img src="/Graphic/Illustration/scale.png" class="img-responsive lc-local-thumb" style="position:relative;top:-4px;" />
</a>
<div style="position:relative;top:-12px;">
<a href="/Shop/Item/2">
<h5>
<span source="Hopp sa reven"></span>
</h5>
</a>
<div>
<div style="width:100%;">
<div id="buyButtonWrapper" class="lc-local-button-wrap">
<input type="text" id="TextCount" style="width:36px;text-align:center;position:relative;top:2px;margin-right:2px;" value="1" />
<button id="buyButton" type="submit" class="btn btn-danger"><i class="fa fa-cart-plus" aria-hidden="true" style="font-weight:bold;font-size:22px;"></i></button>
</div>
<div id="buyButtonDoneWrapper" class="lc-local-button-wrap" style="display:none;">
DONE!
</div>
</div></div>
</div>
</div>
<div class="lc-presentation-container" style="height:270px;">
<a href="/Shop/Item/3">
<img src="/Graphic/Illustration/scale.png" class="img-responsive lc-local-thumb" style="position:relative;top:-4px;" />
</a>
<div style="position:relative;top:-12px;">
<a href="/Shop/Item/3">
<h5>
<span source="Navn på norsk"></span>
</h5>
</a>
<div>
<div style="width:100%;">
<div id="buyButtonWrapper" class="lc-local-button-wrap">
<input type="text" id="TextCount" style="width:36px;text-align:center;position:relative;top:2px;margin-right:2px;" value="1" />
<button id="buyButton" type="submit" class="btn btn-danger"><i class="fa fa-cart-plus" aria-hidden="true" style="font-weight:bold;font-size:22px;"></i></button>
</div>
<div id="buyButtonDoneWrapper" class="lc-local-button-wrap" style="display:none;">
DONE!
</div>
</div></div>
</div>
</div>
<div class="lc-presentation-container" style="height:270px;">
<a href="/Shop/Item/4">
<img src="/Graphic/Illustration/scale.png" class="img-responsive lc-local-thumb" style="position:relative;top:-4px;" />
</a>
<div style="position:relative;top:-12px;">
<a href="/Shop/Item/4">
<h5>
<span source="Brylkrem"></span>
</h5>
</a>
<div>
<div style="width:100%;">
<div id="buyButtonWrapper" class="lc-local-button-wrap">
<input type="text" id="TextCount" style="width:36px;text-align:center;position:relative;top:2px;margin-right:2px;" value="1" />
<button id="buyButton" type="submit" class="btn btn-danger"><i class="fa fa-cart-plus" aria-hidden="true" style="font-weight:bold;font-size:22px;"></i></button>
</div>
<div id="buyButtonDoneWrapper" class="lc-local-button-wrap" style="display:none;">
DONE!
</div>
</div></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
TagHelper.BuyButton.js:
- $(document).ready(function () {
$("#buyButton").click(function () {
alert("test");
});
});
What am I doing wrong?
Topic Participants
stein.lundbeck
jakecigar
jtara-jquery