0

Total Jquery noob，按照我的方式工作。它托管在这里：mySite

感兴趣的是页脚。想按下站点地图并让页脚很好地展开以显示它正在做的漂亮站点地图。想将站点地图按钮更改为另一个按钮以将其关闭。

使用 replaceWith() 它可以很好地更改按钮，但我不能使用新的 HTML 来做任何事情，它完全没有响应。已经为此苦苦挣扎了一个半小时，尝试了 toggleClass() 等。无法让它工作。不关心我在关闭方法中可能搞砸的任何其他内容，更愿意自己学习。

干杯。

<script>
 $(document).ready(function(){
  $(".siteMap").click(function(){
   $("#footer").animate({
      height:  '150px'
      }, 1000);
    $("#table").fadeIn('20000');
    $(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
   }); // end .click

  $(".close").click(function(){
    $("#footer").css('height', '25px');
    $("#table").fadeOut('20000');
    $(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
   }); // end .click
  }); // end .ready
</script>

<div id="footer">
 <div id="table">
  <table width="100%">
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>                    
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>    
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>
  </table>
 </div>
 <span id="home"><a href="#">HOME</a></span>
 <span id="top"><a href="#banner">TOP</a></span>
 <span class="siteMap"><a>SITE MAP</a></span>
</div>

#table{
    display:    none;
    z-index:    999;
    }

#table  table{
    border: 0;
    }

#table  td{
    border: 0;
    }

#footer{
    padding:    5px;
    height: 25px;
    border: 1px solid   #ff0000;
    border-radius:  20px;
    margin: auto;
    text-align: center;
    background: url('../images/backgroundNavy.jpg') top left;
    background-repeat:  repeat-x;
    }

#footer a{
    text-decoration:    none;
    color:  white;
    font-size:  15px;
    font-family:    proxima;
    font-weight:    bold;
    }
4

4 回答 4

1

它变得无响应的原因是因为您没有将点击事件重新绑定到元素。

调用 replaceWith 后，您必须将单击重新绑定到该元素。

但是，我建议显示/隐藏您的站点地图/关闭按钮，而不是创建新按钮。使用这种方法，您无需重新绑定单击。

希望这可以帮助！

于 2012-08-23T01:11:45.917 回答
0

在您绑定事件时，您将单击事件附加到的元素不存在。您需要将这些事件委托给确实存在的元素，例如：

$(document).ready(function() {
    $("#footer").on('click', ".siteMap", function() {
        $("#footer").animate({
            height: '150px'
        }, 1000);
        $("#table").fadeIn('20000');
        $(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
    }); // end .click
    $("#footer").on('click', ".close", function() {
        $("#footer").css('height', '25px');
        $("#table").fadeOut('20000');
        $(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
    }); // end .click
}); // end .ready​​

小提琴

on()仅适用于 jQuery 1.7+，对于旧版本，有delegate()或live().

最好的办法是隐藏/显示元素，而不是像这样不断替换它们：FIDDLE

于 2012-08-23T01:10:40.020 回答
0

问题是您在页面加载时将单击事件处理程序附加到元素。但是，当页面第一次加载您<span>的类时，“close”还不是 DOM 的一部分，因为您稍后会动态添加它。当您稍后添加它时，它没有附加事件处理程序。

解决此问题的一种方法是使用 JQuery.on()方法，该方法会将事件处理程序附加到与您的选择器匹配的所有现有元素，以及添加的任何未来元素。 这是 JQuery 文档。

您的 JavaScript 看起来像这样（注意，在将事件处理程序添加到“siteMap”元素时，您需要进行相同的更改，否则您将无法在折叠后再次显示站点地图。）

 $(document).ready(function(){
  $("#footer").on("click", ".siteMap", function(){
   $("#footer").animate({
      height:  '150px'
      }, 1000);
    $("#table").fadeIn('20000');
    $(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
   }); // end .click

  $("#footer").on("click", ".close", function(){
    $("#footer").css('height', '25px');
    $("#table").fadeOut('20000');
    $(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
   }); // end .click
  }); // end .ready​​​​

但是我同意@Ariel 的评论，即在这种情况下更改 HTML 通常不是最好的方法。

于 2012-08-23T01:11:16.107 回答
0

问题是在您创建带有 class 的元素之前，您的 javascript 已被解析.close。为了解决这个问题，jquery 有一个内置的on() 函数。

$('.close').on('click',function(){
    //your function here
});
于 2012-08-23T01:11:42.447 回答