Question

不确定此代码无效的原因。当我点击活动链接时，文本应该切换并一直这样做。此代码只运行一次，然后onclick无效。关于JSFiddle的示例。您能否解释一下为什么这对您的解决方案不起作用？

<div id="imageId">Image A, <a id="imageB" href="#">Image B</a></div>


$(document).ready(function() {
    $('#imageB').click(function(event) {
        "use strict";
        alert("imageB");

        event.preventDefault();
        $('#imageId').html("Image B, <a id='imageA' href='#'>Image A</a>").show();
    });
});

$(document).ready(function() {    
    $('#imageA').click(function(event) {
        "use strict";
        alert("imageA");

        event.preventDefault();
        $('#imageId').html("Image A, <a id='imageB' href='#'>Image B</a>").show();
    });
});

Answer 1

文档准备就绪时，没有ID为“imageA”的元素。单击“imageB”后添加它，所以它非常简单，为什么它不起作用。

为了让您的代码能够在您更改HTML后立即调用函数，允许javascript知道“imageA”是谁。

这是你修复的例子，当然你仍然可以重构代码，所以你不必复制粘贴两次相同的东西：

http://jsfiddle.net/Waclock/JmmxJ/6/

$(document).ready(function() {
    reloadLinks();
});
function reloadLinks(){
    $('#imageB').click(function(event) {
        "use strict";
        alert("imageB");

        event.preventDefault();
        $('#imageId').html("Image B, <a id='imageA' href='#'>Image A</a>").show();
        reloadLinks();
    });

    $('#imageA').click(function(event) {
        "use strict";
        alert("imageA");

        event.preventDefault();
        $('#imageId').html("Image A, <a id='imageB' href='#'>Image B</a>").show();
        reloadLinks();
    });
}

Answer 2

使用事件委托...这允许在运行时更改或根本不存在的元素。当你删除一个元素时，直接绑定到它的所有事件都会丢失，即使你在同一个地方使用相同的html替换它并使用页面

$(document).on('click', '#imageA', function(event){
/* your code*/
});

您只需在页面加载时调用一次，无论您更换元素多少次，它都会运行相同的代码。它正在做的是将事件处理程序绑定到树的更高级别（在本例中为文档），并且每当更高级别被克隆时，如果目标是选择器，它将触发。

Answer 3

尝试：

    $('#imageB').on("click", function(event) {
        "use strict";
        alert("imageB");

        event.preventDefault();
        $('#imageId').html("Image B, <a id='imageA' href='#'>Image A</a>").show();
    });

首次运行后链接不会切换

3 个答案: