ansaurus

Question

Img tag works when hard coded but not when dynamically inserted via javascript.

Answer 1

+2 A:

This is possibly more idiomatic:

$('.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);
}

It avoids using the nth child psuedo-selector, so should be more performant. I also think it reads a little better, but that's just personal taste...

Khanzor 2010-02-02 00:25:42

Don't forget you can do this now as well: `$('<img/>', { id: 'up'+i+1, src: 'Images/thumbs_up_48.png' }).appendTo(this);` Also, you need a `+1`, jQuery is 0 based, he needs 1 based indexing.

Nick Craver 2010-02-02 00:31:55

Cheers Nick, I've updated my answer :).

Khanzor 2010-02-02 00:59:29

Good catch Khanzor, deleted and +1 to you.

Nick Craver 2010-02-02 01:20:00

Answer 2

A:

Here's the full body of the html

<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" />

                    <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" />

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

                    <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" />

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

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

                </form>

            </div>

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

</body>

Catfish 2010-02-02 00:30:26

SO is not a forum ;) Next time, post any additional information you may have in the original question, not as an answer.

Justin Johnson 2010-02-02 00:49:43

I guess i didn't realize you could. Thanks for the tip.

Catfish 2010-02-02 00:54:54

Answer 3

+1 A:

As <input /> isn't really a container like a div, I somehow doubt that javascript can be used to insert anything inside of it. This is just a guess, but perhaps when it is hard coded, the browser is making a correction for you and placing the image after the <input />.

Correction:

I previously said to append to input's parent, but the inputs share the same parent. Instead use after() to place images after each input.

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

patrick dw 2010-02-02 00:33:20

$('inputBox').each(function(index) { (this).after('<img />');}This worked. Thanks!

Catfish 2010-02-02 02:02:43

ansaurus

tags:

views:

answers:

Img tag works when hard coded but not when dynamically inserted via javascript.

related questions