Javascript 单击按钮时增加计数器值，然后重新使用值

我有三张照片显示“photo0”、“photo1”、“photo2”，我正在尝试这样做，以便单击中间的照片将显示的照片更改为“photo1”、“photo2”、“photo3”。我不知道为什么这段代码不起作用

我添加了一个文本框，只是为了显示我的计数器发生了什么。当我点击中间的照片，一切正常后，照片会发生变化，计数器的值变为2，但当我再次点击中间的照片时，什么也不会发生

var counter = $('#TextBox').val(); //Initial value of TextBox is 1

$("#middle_photo").click(function() {
    $("#left_photo").replaceWith('<img id="left_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#middle_photo").replaceWith('<img id="middle_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#right_photo").replaceWith('<img id="right_photo" src="photo'+counter+'.jpeg" />');
    counter--;

    $('#TextBox').val(counter);

});

var counter=$（'#TextBox'）.val（）//TextBox的初始值为1
$（“#中间照片”）。单击（函数（）{
$（“#左图”）。替换为（“”）；
计数器++；
$（“#中间照片”）。替换为（“”）；
计数器++；
$（“#右图”）。替换为（“”）；
计数器--；
$（“#文本框”）.val（计数器）；
});

第一次单击时：

一切都很好，因为您的代码可以正常工作，并且事件会在单击时触发

之后：

click

事件没有绑定到新替换的元素，因此您应该像

$(document).on("click", "#middle_photo", function() {
    $("#left_photo").replaceWith('<img id="left_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#middle_photo").replaceWith('<img id="middle_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#right_photo").replaceWith('<img id="right_photo" src="photo'+counter+'.jpeg" />');
    counter--;

    $('#TextBox').val(counter);
});

---

在这个实现中，您没有添加和删除DOM中的任何元素，因此效率更高，而且它的短，在我看来它看起来更漂亮

重新写入

var counter = $('#TextBox').val(); //Initial value of TextBox is 1

$("#middle_photo").click(function() {

    $("#left_photo").attr('src',"photo"+counter+".jpeg");
    counter++;

    $("#middle_photo").attr('src',"photo"+counter+".jpeg")
    counter++;

    $("#right_photo").attr('src',"photo"+counter+".jpeg");
    counter--;

    $('#TextBox').val(counter);

});

---

感谢@A.Wolff提供指导

新更换元件的点击事件丢失非常感谢！修复了该问题并提高了我对单击事件的理解。

var counter = $('#TextBox').val(); //Initial value of TextBox is 1

$("#middle_photo").click(function() {

    $("#left_photo").attr('src',"photo"+counter+".jpeg");
    counter++;

    $("#middle_photo").attr('src',"photo"+counter+".jpeg")
    counter++;

    $("#right_photo").attr('src',"photo"+counter+".jpeg");
    counter--;

    $('#TextBox').val(counter);

});