改变动态创建的行

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