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>

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

更改动态创建的行的图像

3 个答案: