アラートはアイコン全体をクリックしないと表示されない場合

Question

アイコンをクリックしたときにアラートを表示したいのですが、何らかの理由で全行に表示されます。私は間違って何をしていますか？

<div class="footer"> 
    <span id="scroll-top"> 
     <i class="fa fa-round fa-chevron-up"></i> 
    </span> 
</div> 

.footer { 
    background-color: black; 
    color: white; 
    padding-top: 40px; 
} 

.footer .fa-round { 
    padding: 0; 
    border-radius: 50%; 
    color: white; 
    background-color: red; 
    font-size: 1.3em; 
    line-height: 1.6em; 
    height: 34px; 
    width: 34px; 
} 

.footer #scroll-top { 
    display: block; 
    cursor: pointer; 
    z-index: 99999999; 
    text-align: center; 
    position: relative; 
    top: -50px; 
} 

http://jsfiddle.net/hgu02x0b/1/

Answer 1

あなたはそれが完全な幅を取ることになり<span id="scroll-top">要素display: blockを与えました。あなたのクリックハンドラが$("i.fa-chevron-up").click(...)に変更した場合

だから、

Updated fiddle

---

それともdisplay: inline-blockに<span id="scroll-top">を変更し、footer

Updated fiddle

---

に text-align: centerを設定することができます動作します

あるいは、iconが一定の幅を有しているので、<span id="scroll-top">を同じ幅を与え、width: 34px中心がmargin: 0 auto

Updated fiddle

Answer 2

あなたがターゲットとしている要素のより具体的な、現時点ではあなたは#scroll-topのIDを持つ要素をターゲットとすることができますが、より具体的に、その内のアイコン要素をターゲットにすることができます#scroll-top i

$("#scroll-top i").click(function() { 
 
    alert('test'); 
 
});

.footer { 
 
    background-color: black; 
 
    color: white; 
 
    padding-top: 40px; 
 
} 
 

 
.footer .fa-round { 
 
    padding: 0; 
 
    border-radius: 50%; 
 
    color: white; 
 
    background-color: red; 
 
    font-size: 1.3em; 
 
    line-height: 1.6em; 
 
    height: 34px; 
 
    width: 34px; 
 
} 
 

 
.footer #scroll-top { 
 
    display: block; 
 
    cursor: pointer; 
 
    z-index: 99999999; 
 
    text-align: center; 
 
    position: relative; 
 
    top: -50px; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="footer"> 
 
    <span id="scroll-top"> 
 
\t \t <i class="fa fa-round fa-chevron-up"></i> 
 
\t </span> 
 
</div>

Answer 3

span要素がブロックとして表示され、コンテナの幅をカバーしています。あなたはこれを取り出して

$("#scroll-top").click(function() { 
 
    alert('test'); 
 
});

.footer { 
 
    background-color: black; 
 
    color: white; 
 
    padding-top: 40px; 
 
} 
 

 
.footer .fa-round { 
 
    padding: 0; 
 
    border-radius: 50%; 
 
    color: white; 
 
    background-color: red; 
 
    font-size: 1.3em; 
 
    line-height: 1.6em; 
 
    height: 34px; 
 
    width: 34px; 
 
} 
 

 
.footer #scroll-top { 
 
    cursor: pointer; 
 
    z-index: 99999999; 
 
    text-align: center; 
 
    position: relative; 
 
    top: -50px; 
 
    display: inline-block; 
 
    position: relative; 
 
    left: 50%; 
 
    -moz-transform: translate(-50%, 0%); 
 
    -webkit-transform: translate(-50%, 0%); 
 
    -ms-transform: translate(-50%, 0%); 
 
    -o-transform: translate(-50%, 0%); 
 
    transform: translate(-50%, 0%); 
 

 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="footer"> 
 
    <span id="scroll-top"> 
 
\t \t <i class="fa fa-round fa-chevron-up"></i> 
 
\t </span> 
 
</div>

スパンが display: blockに設定されている

Answer 4

中心に.footer内のすべての子要素をテキスト整列させることができます。これは完全な行を占めるようになります。あなたは、より正確にはjQueryを変更することができます。

$("#scroll-top i").click(function() { 
    alert('test'); 
}); 

fiddle

Answer 5

を用いたディスプレイにそれを変更：インラインブロック。 http://jsfiddle.net/hgu02x0b/2/

.footer #scroll-top { 
    display: inline-block; 
    cursor: pointer; 
    z-index: 99999999; 
    text-align: center; 
    position: relative; 
    top: -50px; 
    left: 50%; 
    margin-left: -17px; 
} 

ホープこれは