Javascript 使用Jquery中的toggel函数时，动态添加的图像不会添加到页面上

下面是在Javascript中添加图像的代码

function AddFirstRow() {
    //Create an input type dynamically.
    var element ;
    var seatArr = document.getElementById("seatArr");

    //Assign different attributes to the element.
    var  rowCounter ;
    for( rowCounter = 1 ; rowCounter < 8 ; rowCounter++ ){
        element = document.createElement("input");
        element.setAttribute("type", "image");
        element.setAttribute("src","../Images/available_seat_img.png") ;
        element.setAttribute("class", "seatRightMostRow1");
        element.setAttribute("id", "1V");
        seatArr.appendChild(element);
    }
}

---

这取决于你连接东西的顺序

如果我确保在连接

切换

处理程序之前插入图像，则这些切换适用于所有图像：

$(function(){
  AddFirstRow();
});

$("input[id]").toggle(function(){
  $(this).attr("src","../Images/selected_seat_img.png");
},function(){
  $(this).attr("src","../Images/available_seat_img.png");
});

如果我将调用移动到

AddFirstRow

发生在

切换

连接后，它实际上只会触发初始图像

小提琴：

通常，您可以使用jQuery的

on

来设置一个处理程序，该处理程序也将在动态元素上触发，但我不确定如何使用

切换

。我查一下

更新

此代码使用

on

函数确保处理程序为动态元素激发：

$(".seatArr").on('click', 'input', function(){
  $(this).attr("src",
    $(this).attr("src") == "../Images/selected_seat_img.png"
    ? "../Images/available_seat_img.png"
    : "../Images/selected_seat_img.png"
  );
});

---

感谢Frank，刚才更改了函数的顺序。之前我在按钮的onclick事件上调用AddFirstRow（）函数。更改了顺序切换和AddFirstRow（）。它现在正在工作。。我还需要澄清如何将数据绑定到这个动态图像。。实际上，我正在尝试创建一个公交车座椅布局，用户可以从动态生成的图像中选择一个座椅。我不知道你说的“将数据绑定到动态图像”是什么意思。如果这是一个不同的具体问题，一定要单独问。不过，我建议您首先了解订购的重要性以及

on

（及其前身

live

）如何适应您的情况。

$(function(){
  AddFirstRow();
});

$("input[id]").toggle(function(){
  $(this).attr("src","../Images/selected_seat_img.png");
},function(){
  $(this).attr("src","../Images/available_seat_img.png");
});

$(".seatArr").on('click', 'input', function(){
  $(this).attr("src",
    $(this).attr("src") == "../Images/selected_seat_img.png"
    ? "../Images/available_seat_img.png"
    : "../Images/selected_seat_img.png"
  );
});