javascript - 更改动态创建的行的图像

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_textbox 中插入的 url 进行加载

 $(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>