Question

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;
    }

Answer 1

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

在调用replaceWith之后，必须将点击重新绑定到该元素。

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

希望这有帮助！

Answer 2

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

$(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

FIDDLE

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

最好的方法是隐藏/显示元素，而不是经常替换它们，如下所示：FIDDLE

Answer 3

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

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

您的JavaScript看起来像这样（请注意，在将事件处理程序添加到“siteMap”元素时需要进行相同的更改，否则您将无法在折叠后第二次显示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通常不是最佳方法。

Answer 4

问题在于，在创建具有类.close的元素之前，您的javascript已被解析。为了解决这个问题，jquery有一个内置的on() function。

$('.close').on('click',function(){
    //your function here
});

改变班级不工作

4 个答案: