0

我正在开发一个网站并尝试使用 jQuery 进行翻译，所以我不必刷新整个页面，我有这个 html 标记：

<nav class="menu">
        <ul id="menu">
            <li class="home"><a href="#">Home</a></li>
            <li class="find_us"><a href="#">About Us</a></li>
        </ul> 
</nav>

在 About Us 链接上使用 jQuery 我这样做：

        //SHOW MAP
    $('.find_us a').click(function () {
        $('#google_map').fadeIn();
    });

并使用此代码关闭地图窗口：

       //CLOSE MAP
       $(".home a").click(function () {
           $('#google_map').fadeOut();
        });

当我单击链接更改语言时，问题就开始了：

<a class="spanish" href="#"><img src="images/flags/es.gif" alt="ES" /></a>
    //ES
    $( ".spanish" ).click(function() {
        $('.home a').replaceWith('<a href="#">Inicio</a>'),
        $('.find_us a').replaceWith('<a href="#">Acerca De</a>');
    });

匿名 jQuery 函数内的所有 jQuery 代码：

$(function(){/*jQuery code*/});

从这一点开始，一旦我调用该方法，我就无法再次显示或关闭地图，我该replaceWith()如何解决这个问题？

4

5 回答 5

1

事件委托

$('.find_us').on('click', 'a', function () {
    $('#google_map').fadeIn();
});
$('.home').on('click', 'a', function () {
    $('#google_map').fadeOut();
});

或者只是更改文本，而不是a元素

//ES
$( ".spanish" ).click(function() {
    $('.home a').text('Inicio'),
    $('.find_us a').text('Acerca De');
});
于 2013-10-12T17:21:56.503 回答
1

基本上有三种不同的解决方案。

您可以替换链接中的文本而不是链接本身：

$( ".spanish" ).click(function() {
    $('.home a').text('Inicio'),
    $('.find_us a').text('Acerca De');
});

您可以在替换元素后重新绑定事件。

您可以在父元素上绑定委托，以便替换元素不会删除事件绑定：

$('.find_us').on('click', 'a', function () {
    $('#google_map').fadeIn();
});
于 2013-10-12T17:23:08.600 回答
0

试试这个而不是点击：

$('.find_us a').on('click', function () {    
   $('#google_map').fadeIn();
});
$(".home a").on("click",function () {
   $('#google_map').fadeOut();
});
于 2013-10-12T17:17:57.500 回答
0

这是因为您将单击事件绑定a到已删除的元素上，然后附加新的元素。新a元素没有绑定点击事件。

于 2013-10-12T17:24:20.280 回答
0

当您使用 replaceWith 时，它会破坏附加了事件的元素。您可以在每次替换它时将事件添加回它，或者您可以将事件附加到所有 'a' 后代元素，如下所示：

$('.find_us').on("click", "a", function () {
    $('#google_map').fadeIn();
});

$(".home").on("click", "a", function () {
    $('#google_map').fadeOut();
});
于 2013-10-12T17:29:40.543 回答