asp.net mvc 中使用了公用母版后javascript的作用区域问题

@{
    ViewBag.Title = "Index";
}

<div class="container">

<div id="testDiv4" style="height: 300px;width: 300px;background-color: #F5F5DC;margin-top: 100px"></div>
<h2>静态导航栏示例</h2>
<script type="text/javascript">
    $("#testDiv4").css({ color: "#ff0011", background: "blue" });
    $("#testDiv4").bind("click", function (event) { alert("one"); });
</script>
  <p>一个带项目名称，导航菜单，搜索表单的静态（不固定显示）导航栏的示例，</p>
  <div class="navbar" id="navi">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">项目名称</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#" id="indexpage" >主页</a></li>
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">另一个动作</a></li>
                <li><a href="#">一些东西</a></li>
                <li class="divider"></li>
                <li class="nav-header">导航头部</li>
                <li><a href="#">分隔链接</a></li>
                <li><a href="#">另一个分隔链接</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="">
            <input type="text" class="search-query span2" placeholder="Search">
          </form>
          <ul class="nav pull-right">
            <li><a href="#">链接</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">另一个动作</a></li>
                <li><a href="#">一些东西</a></li>
                <li class="divider"></li>
                <li><a href="#">分隔链接</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->
  </div>

 

比如上面的一个页面，<script type="text/javascript">
$("#testDiv4").css({ color: "#ff0011", background: "blue" });
$("#testDiv4").bind("click", function (event) { alert("one"); });
</script>放在页面的开始部分就不会对当前页面产生效果，只会对母版页产生效果，就是因为这个问题，困扰了我很久。

这可能是javascript的原有问题吧，是在是学艺不精，以后注意