带Jquery覆盖的引导按钮单击事件
我正在使用Bootstrap3和jQuery创建一个新网站的原型 我遇到了一个按钮点击事件的问题,因为它只能工作一次。单击事件在jQuery中被覆盖,我认为这就是问题所在……不是jQuery,而是我对jQuery的了解 HTML代码是带Jquery覆盖的引导按钮单击事件,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我正在使用Bootstrap3和jQuery创建一个新网站的原型 我遇到了一个按钮点击事件的问题,因为它只能工作一次。单击事件在jQuery中被覆盖,我认为这就是问题所在……不是jQuery,而是我对jQuery的了解 HTML代码是 <div class="row" id="bigCallout"> <div class="col-md-12"> <!-- Alert Block to show when
<div class="row" id="bigCallout">
<div class="col-md-12">
<!-- Alert Block to show when Bloody Big Button pressed -->
<div class="alert alert-success alert-block fade in" id="successAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>You just made this element display by using jQuery. Click the 'x' to close this bad boy!</p>
</div><!-- end alert-block -->
<!-- Visible only on small devices -->
<div class="well well-sm visible-sm">
<a href="#" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"> Give Us a Call!</span></a>
</div><!-- end well-sm -->
<div class="well">
<div class="page-header">
<h1>A Fancy Header. <small>A subheading for extra awesomeness...dood!</small></h1>
</div><!-- end page-header -->
<p class="lead">Some catchy copy to get your users engaged . Use this area to come up with something nice and convincing. Know what I'm saying?</p>
<!-- Bloody Big Button to set the alert Block -->
<a href="#" class="btn btn-large btn-primary" id='alertMe'>A Bloody Big Button</a>
<a href="#" class="btn btn-large btn-link">...or a secondary link</a>
</div><!-- end well -->
</div><!-- end col-md-12 -->
</div><!-- end bigCallout -->
此时,此操作只能发生一次,我需要帮助以允许在不刷新屏幕的情况下重复此操作。发生了什么?打开successAlert元素后,即使您再次单击它,它仍将保持打开状态。如果您通过单击内部的“关闭”按钮来删除successAlert,则无法在第二时间显示已删除的元素也是正常的。是否使用X关闭警报?如果是这样,那么将从DOM中完全删除警报块,这样
successAlert
将不再存在,脚本也将不再执行任何操作。您应该向它添加一个计时器,然后如果您想让它使用它,就再次隐藏该元素?例如和(如果您搜索“点击JQuery只工作一次”,则会有更多内容。)谢谢各位。我正在删除带有“x”的警报,因此我需要做的似乎是将数据隐藏改为数据隐藏。
$(function(){
//Big Button click event
$("#alertMe").click(function(e){
e.preventDefault();
$("#successAlert").slideDown();
});
});