javascript - Links do not switch after first run

Question

Not sure why this code is not working. When I click on the active link the text should switch and keep doing so all the time. This code just runs once and then the onclick has no effect. Example on JSFiddle. Could you please explain why this did not work with your solution shown?

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