改變動態創建的行

Question

按下一個按鈕，一個新行一個文本框，一個按鈕的圖像，並且圖像創建

$("#dynamic_table").append('<tr><td><input type="text" id="url_textbox"></td><td><input type="button" id="load_image_btn" value="Load Image"></td><td><img id="image_id"></td></tr>'); 

我想達到的目標是，當我按下load_image_btn圖像相應的行的SRC加載與所述URL i。在url_textbox

$(document).on("click", "#load_image_btn", function(){ 

//http://mith.umd.edu/engl668k/wp-content/uploads/2013/01/twitter-logo-small.jpg 
//http://demo-old-ofbiz.apache.org/images/products/GZ-1000/small.png 
//alert(this.id); 
var url = $("#url_textbox").val(); 
    if (url != ""){ 
     $("#image_id").attr("src", url); 
    } 

}); 

使用上述代碼段插入和而我按下第一創建的行的按鍵，因爲它是在第一個預期的圖像加載行。問題是，當我追加一個新的行到動態創建的表，而我按例如load_image_btn在任何行的第二行，除了第一個img src保持空白。

Answer 1

id應該在你的代碼的唯一的，所以你需要使用class，而不是id。在你的情況下，它只會選擇其中有id

$("#dynamic_table").append('<tr><td><input type="text" class="url_textbox"></td><td><input type="button" class="load_image_btn" value="Load Image"></td><td><img class="image_id"></td></tr>').append('<tr><td><input type="text" class="url_textbox"></td><td><input type="button" class="load_image_btn" value="Load Image"></td><td><img class="image_id"></td></tr>').append('<tr><td><input type="text" class="url_textbox"></td><td><input type="button" class="load_image_btn" value="Load Image"></td><td><img class="image_id"></td></tr>'); 
 

 

 
$(document).on("click", ".load_image_btn", function() { 
 
    var parent = $(this).closest('tr'), 
 
    // getting parent tr  
 
    url = $(".url_textbox", parent).val(); 
 
    // getting value of textbox inside the same tr 
 
    if (url != "") { 
 
    $(".image_id", parent).attr("src", url); 
 
    // getting image tag inside the same tr 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="dynamic_table"></table>

Answer 2

要複製的id，

使用class代替。像<input type="text" class="url_textbox">

$(document).on("click", ".load_image_btn", function(){ 
    var url = $(".url_textbox",$(this).closest('tr')).val(); 
    if (url != ""){ 
     $(".image_id",$(this).closest('tr')).attr("src", url); 
    } 
}); 

Answer 3

$("#dynamic_table").append(' 
    <tr> 
     <td><input type="text" class="url_textbox"></td> 
     <td><input type="button" class="load_image_btn" value="Load Image"></td> 
     <td><img class="image_id"></td> 
    </tr> 
'); 
    $(document).on("click", ".load_image_btn", function(){ 

     var loadImage = new Image(); 
     var loadImg = loadImage.src = url = $(".url_textbox", parent).val();; 
     if (loadImg != "") 
     { 
      $('.image_id", parent').attr('src', loadImg); 
     } 
    });