Img 标签在硬编码时有效，但在通过 javascript 动态插入时无效答案

【问题标题】：Img tag works when hard coded but not when dynamically inserted via javascriptImg 标签在硬编码时有效，但在通过 javascript 动态插入时无效
【发布时间】：2010-02-02 00:14:26
【问题描述】：

如果我动态生成 img 标签，它们不会在应该显示的时候显示，但如果我对其中的值进行硬编码，图像就会显示出来。有谁知道这是为什么？

根据我的 jQuery，应该在每个输入之后插入 2 个带有 .inputBox 类的图像标签

HTML：

<form action="" method="post" id="myform">
   <label for="FirstName">First Name</label>
      <input type="text" class="inputBox" name="FirstName" id="firstName" />


      <label for="LastName">Last Name</label>
      <input type="password" class="inputBox" name="LastName" id="lastName" />

</form>

CSS：

.thumb {
 visibility:hidden;
 height:0;
 width:0;
}
.thumbV {
 visibility:visible;
 height:30px;
 width:30px;
 float:right;
 padding:0 15px 0 0;
}
.borderGreen {
 border:solid 2px #24F706;
}
.borderRed {
 border:solid 2px #FD0F0F;
}

jQuery:

$(document).ready(function() {


 //calls the addImages function which is below
 addImages();

 //when the input focus is blurred
 $("#firstName").blur(function() {

  //when the focus is blurred, the sendValue function is called 
  //with the value that is in the input box
  sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
 });
 //when the input focus is blurred
 $("#firstName").focus(function() {

  //when the input gains focus, the sendValue function is called 
  //with the value that is in the input box
  sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
 });

 $("#lastName").blur(function() {
  sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
 });

 $("#lastName").focus(function() {
  sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
 });


 //function to determine the number of input fields and append a number to the id of each
 //in order to display the correct thumb when a field is blurred

 function addImages() {   

  var numInputs = $("div").length;

  for(var i = 1;i<=numInputs;i++) {

   //insert the thumbs images after form elements. 
   $("<img src=\"Images/thumbs_up_48.png\" class=\"thumb\" id=\""+"up"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
   $("<img src=\"Images/thumbs_down_48.png\" class=\"thumb\" id=\""+"down"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
  } 
 }

 //function that sends the input box value to the php script.
 //the php script checks if the input box value is in the correct format
 //and sends a variable of either true or false back to this function. 
 //this function takes that variable and either adds classes or removes classes to 
 //give the border a different color and the correct icon. 
 function sendValue(str, file, up, down, field) {

  //calls the ajax.php file using the post method and passes the variable str
  $.post(file, {sendValue: str}, 

  //when the php script sends a variable back, this function compares the returned
  //variable and makes certain <img> available and adds certain classes.
  function(data) {
   if(data.returnValue === true) {
    $(down).removeClass('thumbV').addClass('thumb');
    $(up).removeClass('thumb').addClass('thumbV');
    $(field).removeClass('borderRed').addClass('borderGreen');
   }
   else if(data.returnValue === false) {
    $(up).removeClass('thumbV').addClass('thumb');
    $(down).removeClass('thumb').addClass('thumbV');
    $(field).removeClass('borderGreen').addClass('borderRed');
   }
   else {
    $(up).removeClass('thumbV').addClass('thumb');
    $(down).removeClass('thumbV').addClass('thumb');
    $(field).removeClass('borderRed'); 
   }
  }, "json"); 
 }
});

这是我想要实现的输出。当用户在输入中键入内容时，它被设置为 PHP 脚本以进行验证。我已经使用 firebug 来确保 PHP 脚本正常工作。如果验证正确，则的类之一应更改为 thumbV，并且输入框也应获得类 .borderRed 或 .borderGreen，它确实如此。

<body>

<div id="container">
    <div id="outer">
        <div id="inner">    

            <div id="loginForm">
                <h2>Login</h2>
                <div class="tooltip"></div>
                <form action="" method="post" id="myform">
                    <label for="FirstName">First Name</label>
                    <input type="text" class="inputBox" name="FirstName" title="First Name Here" id="firstName" />
                    <img src="Images/thumbs_up_48.png" id="up1" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down1" class="thumb" />

                    <label for="LastName">Last Name</label>
                    <input type="password" class="inputBox" name="LastName" title="Must be at least 8 characters and contain letters and numbers" id="lastName" />

                    <img src="Images/thumbs_up_48.png" id="up2" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down2" class="thumb" />

                    <label for="Username">Username</label>
                    <input type="text" class="inputBox" name="Username" title="Must be at least 8 characters long" id="username" />

                    <img src="Images/thumbs_up_48.png" id="up3" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down3" class="thumb" />

                    <label for="Password">Password</label>
                    <input type="password" class="inputBox" name="Password" title="Must be at least 8 characters and contain letters and numbers" id="password" />

                    <img src="Images/thumbs_up_48.png" id="up4" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down4" class="thumb" />

                    <label for="Email">Email Address</label>
                    <input type="text" class="inputBox" name="Email" title="Email Address Here" id="email" />

                    <img src="Images/thumbs_up_48.png" id="up5" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down5" class="thumb" />

                    <button type="submit" name="Submit" id="submitButton">Submit</button>
                    <input type="hidden" name="Hidden" id="hidden" />

                </form>

            </div>

        </div>
    </div>
</div>

</body>

【问题讨论】：

在问题案例中使用 Firebug 检查 DOM。它将向您展示 jQuery 实际做了什么。

标签： javascript jquery html css

【解决方案1】：

由于<input /> 并不是真正的 div 容器，因此我怀疑是否可以使用 javascript 在其中插入任何内容。这只是一个猜测，但也许当它被硬编码时，浏览器正在为您进行更正并将图像放在<input /> 之后。

更正：

我之前说过要附加到输入的父级，但输入共享同一个父级。而是使用 after() 在每个输入之后放置图像。

$('inputBox').after('my html with image');

【讨论】：

$('inputBox').each(function(index) { (this).after(''); } 这行得通。谢谢！

【解决方案2】：

这可能更惯用：

$('.inputBox').each(function(i) { 
  var fixedIndex = i + 1;
  $('<img></img>').addClass('thumb')
      .attr('id', 'up'+fixedIndex)
      .attr('src', 'Images/thumbs_up_48.png')
      .after(this);

  $('<img></img>').addClass('thumb')
      .attr('id', 'down'+fixedIndex)
      .attr('src', 'Images/thumbs_down_48.png')
      .after(this);
}

它避免使用第 n 个子伪选择器，因此应该更高效。我也觉得它读起来好一点，但这只是个人品味......

【讨论】：

别忘了你现在也可以这样做：$('<img/>', { id: 'up'+i+1, src: 'Images/thumbs_up_48.png' }).appendTo(this); 另外，你需要一个+1，jQuery 是基于 0 的，他需要基于 1 的索引。
Good catch Khanzor，已删除并 +1 给你。