元素在点击时消失 [英] Element disappearing on click
问题描述
我试图用Jquery做一些事情，并且似乎出了问题。
首先关闭一些代码，
我的HTML，
< a href =＃onclick =return false;类= scrollToTop >< / A>
我的CSS，
.scrollToTop {
width：40px;
height：40px;
line-height：45px;
border-radius：50％;
text-align：center;
背景颜色：#CFCFCF;
background-image：url（../ img / upActive.png）;
背景重复：不重复;
背景位置：50％50％;
位置：固定;
bottom：61px;
right：30px;
转换：不透明度2s缓入;
}
.scrollToTop：hover {
background-color：＃989898;
text-decoration：none;
转换：不透明度2s缓入;
}
我的jquery，
< $ p $ $（document）.ready（function（）{
var hidden = $（'。scrollToTop'）;
hidden.hide（）;
//检查窗口是否为顶部如果不是，则显示按钮
$（window）.scroll（function（）{
if（$（this）.scrollTop（）> ; 100）{
hidden.show（1000）;
} else {
hidden.hide（1000）;
}
}）;
//点击事件滚动到顶部
$（'。scrollToTop'）。click（function（e）{
$（'html，body'）。animate（{
scrollTop：0
}，800）;
return false;
}）;
}）;
JSfiddle：小提琴（感谢vasilenicusor）
问题在于，我的项目中的所有按钮在点击后都消失了。我可以看到环绕在我的浏览器放在那里的环，但是没有任何按钮的消失。
这个问题似乎没有发生在小提琴中（代码在小提琴中根本不起作用）。
有谁知道我应该如何解决这个问题，maby是什么问题？我想在JQuery代码中的东西是使按钮做到这一点。 （大约有8个Jquery文件，包含100多行代码，其中大部分都是库的）。
下面的代码不起作用。
（function（e）
{
e.preventDefault;
}）;
预先感谢！
谢谢你的回答！
但是，在我的代码中似乎有问题是，有一个库是导致这种消失的效果，当有一个href是链接。删除href暂时解决了我的问题。
href =javascript： void（0）而不是 href =＃onclick =return false; < a href =javascript：void（0）class =scrollToTop>< / a>
<！ - - 或更好 - >
< a class =scrollToTop>< / a>
<！ - - 甚至更好 - >>
< span class =scrollToTop>< / span>
，并给出 scrollToTop 如果没有 href ，就用CSS链接到标记，例如：
.scrollToTop {cursor：pointer;颜色：蓝色; }
具有< a href =＃onclick =myJsFunc ）;> Link< / a> 或< a href =javascript：void（0）onclick =myJsFunc（）;>一个> 或其他任何包含 onclick 属性的其他内容 - 几年前都还好，但现在这可能是一种不好的做法。原因如下：
-
它促进了突破性Javascript的实践 - 结果变得难以维护且难以扩展。更多相关信息，请参见 不显眼的JavaScript 。
> -
现在有更好，更容易，更可维护和可扩展的方式来达到预期的效果。
It promotes the practice of obtrusive Javascript - which has turned out to be difficult to maintain and difficult to scale. More on this in Unobtrusive JavaScript.
There are now better, easier, and more maintainable and scalable ways of accomplishing the desired result.
不引人注目的Javascript方式
根本没有 href 属性！任何好的CSS重置都会照顾缺失的默认光标样式，所以这不是问题。然后，如果您有使用优雅和不显眼的最佳实践进行附加的Javascript功能 - 当您的Javascript逻辑保留在Javascript中时，而不是在您的标记中 - 这对于开始开发大规模Javascript应用程序时非常重要。 >
< a class =scrollToTop>取消此操作< / a>
$ b $ //取消点击事件
$（'。scrollToTop'）。click（function（）{
alert（'取消操作发生！'）;
} ）;
.scrollToTop {cursor：pointer;颜色：蓝色; }
.scrollToTop：hover {text-decoration：underline; }
更新
我也忘了说，改变你的滚动到顶部函数来代替：
//点击滚动到顶部
$（。scrollToTop）。click（function（）{
$（html，body）。animate（{scrollTop：0 }，slow）;
}）;
查看jsfiddle示例： https://jsfiddle.net/x1x9pmpx
I'm trying to do some things with Jquery and there seems to be something going wrong.
first off some code,
my HTML,
<a href="#" onclick="return false;" class="scrollToTop"></a>
my CSS,
.scrollToTop {
width: 40px;
height: 40px;
line-height: 45px;
border-radius: 50%;
text-align: center;
background-color: #CFCFCF;
background-image: url(../img/upActive.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: fixed;
bottom: 61px;
right: 30px;
transition: opacity 2s ease-in;
}
.scrollToTop:hover {
background-color: #989898;
text-decoration: none;
transition: opacity 2s ease-in;
}
My Jquery,
$(document).ready(function() {
var hidden = $('.scrollToTop');
hidden.hide();
// Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
hidden.show(1000);
} else {
hidden.hide(1000);
}
});
// Click event to scroll to top
$('.scrollToTop').click(function(e) {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
JSfiddle: Fiddle (thanks vasilenicusor)
The problem is that all the buttons in my project dissapear after they have been clicked. I can see the ring arround them that my browser puts there, but the fysical button dissapears.. This problem does not seem to happen in the fiddle (the code is not working at all in the fiddle).
Does anyone know how I should fix this and maby what is the problem? I guess something in the Jquery code is making the buttons do this. (there are about 8 Jquery files with 100+ lines of code, most of them are library's).
The code below does not work. I've tried it.
(function(e)
{
e.preventDefault;
});
Thanks in advance!
Thanks Chun for your answer! But what seems to be the problem in my code is there seems to be some library that is causing this "dissapear" effect when there is a "href" is the link. Removing the "href" temporally solved my problem.
You could just use href="javascript:void(0)" instead of href="#" onclick="return false;"
<a href="javascript:void(0)" class="scrollToTop"></a>
<!-- OR better -->
<a class="scrollToTop"></a>
<!-- OR even better -->
<span class="scrollToTop"></span>
and just give scrollToTop the attributes of a link with CSS for the markup without href, like:
.scrollToTop { cursor: pointer; color: blue; }
Having <a href="#" onclick="myJsFunc();">Link</a> or <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> or whatever else that contains an onclick attribute - was okay a couple of years ago, though now it can be a bad practice. Here's why:
The unobtrusive Javascript way
Just don't have a href attribute at all! Any good CSS reset would take care of the missing default cursor style, so that is a non-issue. Then in case you have a Javascript functionality to attach using graceful and unobtrusive best practices - which are more maintainable as your Javascript logic stays in Javascript, instead of in your markup - which is essential when you start developing large scale Javascript applications.
<a class="scrollToTop">Cancel this action</a>
// Cancel click event
$('.scrollToTop').click(function(){
alert('Cancel action occurs!');
});
.scrollToTop { cursor: pointer; color: blue; }
.scrollToTop:hover { text-decoration: underline; }
Update
I've also forget to say, change your scroll to top function for this instead:
// Click to scroll to top
$(".scrollToTop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
Check out jsfiddle example here: https://jsfiddle.net/x1x9pmpx
这篇关于元素在点击时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
