Question

我在想我的标题关于和朋友是如何可以点击的。我只需添加class = block即可点击，并检查它是否正在使用alert功能。但它不会起作用。

<script>

$(document).on("click", "#about", function ()
{
    alert('Hi');
});

</script>

标题

<div class = "col-lg-6">
    <div class = "panel panel-default" style = "height: 300px;">
        <div class = "panel-heading" style = "height: 50px;">
            <div class="col-xs-3"><h3 class="panel-title" style = "padding-top: 7.5px;"><a class = "block" id = "about">About</a></h3></div>
            <div class="col-xs-3"><h3 class="panel-title" style = "padding-top: 7.5px;"><a class = "block">Friends</a></h3></div>
        </div>
    </div>
</div>

Answer 1

$(document).ready( function() {
// wait for page to load
    $("a#about").click( function (){ 
      // do your clicked stuff here
      alert('Hi'); 
    })
});

来源：http://www.w3schools.com/jquery/event_click.asp

更新：工作示例https://jsfiddle.net/atg5m6ym/5740/

只有当您点击关于文字而不是其他任何地方

时，您才会收到警报

Answer 2

$(window).load(function() {
  $('#about').on("click", function() {
    alert('Hi');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6" id="about">
  <div class="panel panel-default" style="height: 300px;">
    <div class="panel-heading" style="height: 50px;">
      <div class="col-xs-3">
        <h3 class="panel-title" style="padding-top: 7.5px;"><a class = "block" id = "about">About</a></h3>
      </div>
      <div class="col-xs-3">
        <h3 class="panel-title" style="padding-top: 7.5px;"><a class = "block">Friends</a></h3>
      </div>
    </div>
  </div>
</div>

如何使标题可点击

2 个答案: