javascript - 使用 Jquery 中的切换功能时，动态添加的图像未添加到页面上

Question

下面是在 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);
    }
}

添加图像的正文元素。

<div class="seatArr">        
    <span id="seatArr" >&nbsp;</span> 
    <input type="image" class="seatRightMostRow1" id="1A" alt="sfdsf" src="../Images/available_seat_img.png"  />
    <input type="image" class="seatRightMostRow2" id="1B" alt="sfdsf" src="../Images/available_seat_img.png"  />
</div> 

JQuery 用于图像上的切换功能。

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

Answer 1

这取决于您接线的顺序。

如果我确保在连接toggle处理程序之前插入图像，它们切换适用于所有图像：

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

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

如果我在连接AddFirstRow后将调用移动到发生toggle，它确实只会触发初始图像。

小提琴：http: //jsfiddle.net/frankvanpuffelen/HPPKv/1/

通常你可以使用 jQueryon来设置一个也会触发动态元素的处理程序，但我不确定它如何与toggle. 我会检查。

更新

此代码使用该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"
  );
});