单击按钮时警报第二次不起作用
Alert is not working second time when clicking on button
我使用的是 bootstrap 版本,所以我创建了一个与下例相同的下拉菜单。
button not working second time
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
问题是,当我在向下滑动中单击关闭按钮时,栏正在关闭。
但是当我再次点击 添加愿望清单 时,下拉菜单不再出现。
我的问题不仅仅是关闭。它应该在我点击 'x' 按钮时关闭,否则它会在特定时间后自动关闭。
谢谢。
从您的关闭按钮中移除此功能 'data-dismiss="alert"' 并添加如下所示的另一种点击功能:
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
});
$('#success-alert .close').click(function(){
$(this).parent().hide();
});
});
HTML 会喜欢:
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini" >Add to Wishlist </a>
<a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
而不是编写整个代码。我使用 slideUp()
dealy()
和 slideDown()
Jquery 的方法。
$(document).ready(function() {
$("#success-alert").hide();
$("#btn2").click(function showAlert() {
$("#success-alert").slideDown(300).delay(2000).slideUp(400);
});
});
$('#success-alert .close').click(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
<input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
这个简单的技巧对我有用。使用这个 close.bs.alert
bootsrap 的事件类型来隐藏元素而不是删除它。
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
或
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
我使用的是 bootstrap 版本,所以我创建了一个与下例相同的下拉菜单。
button not working second time
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
问题是,当我在向下滑动中单击关闭按钮时,栏正在关闭。
但是当我再次点击 添加愿望清单 时,下拉菜单不再出现。
我的问题不仅仅是关闭。它应该在我点击 'x' 按钮时关闭,否则它会在特定时间后自动关闭。
谢谢。
从您的关闭按钮中移除此功能 'data-dismiss="alert"' 并添加如下所示的另一种点击功能:
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
});
$('#success-alert .close').click(function(){
$(this).parent().hide();
});
});
HTML 会喜欢:
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini" >Add to Wishlist </a>
<a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
而不是编写整个代码。我使用 slideUp()
dealy()
和 slideDown()
Jquery 的方法。
$(document).ready(function() {
$("#success-alert").hide();
$("#btn2").click(function showAlert() {
$("#success-alert").slideDown(300).delay(2000).slideUp(400);
});
});
$('#success-alert .close').click(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
<input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
这个简单的技巧对我有用。使用这个 close.bs.alert
bootsrap 的事件类型来隐藏元素而不是删除它。
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
或
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});