Question

我正在开发一个网站，并尝试使用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>

在关于我们链接上使用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()方法时，我无法再显示或关闭地图，我该如何解决？

Answer 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');
});

Answer 2

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

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

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

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

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

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

Answer 3

尝试此操作而非点击：

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

Answer 4

这是因为您绑定了a元素上的点击事件，然后添加新元素。新的a元素没有绑定到它们的点击事件。

Answer 5

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

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

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

在replaceWith（）之后jQuery .click（）不起作用

5 个答案: