-1

The HTML look like this:

<body>
    <ul>
        <li class='link'> <a href='http://www.1.com'></a></li>           
    </ul>

    <ul>
        <li class='link'> <a href='http://www.2.com'></a></li>              
    </ul>
</body>

The js:

$(document).ready(function(){

    $(".link a").each(function() {
        var a_href = $(this).attr('href');
        var parser = document.createElement('a');
        parser.href = a_href;

        if (parser.hostname == "www.1.com") {
            $(this).append('<img src="1.jpg"/>');
        } else if (parser.hostname == "www.2.com") {
            $(this).append('<img src="2.jpg" />');
        } 
    });

    $('body').append("<ul><li class='link'><a href='http://www.2.com'></a></li></ul>");
});

I want the appended tag to also reflect the insertion.

Here I just simplify my case, actually, the appended is added by click, so I want to ensure that the can be inserted even the is added later.

7
  • 1
    What do you want to do with .on()?
    – Regent
    Nov 18, 2014 at 13:17
  • Also, I don't see any point in a_href and parser variables. Why not to use this? Fiddle example.
    – Regent
    Nov 18, 2014 at 13:21
  • 1
    What are you trying to accomplish here? I see you want to insert <img> tags inside your <a> but then you append another <ul> to the body at the end of the ready function? Are you wanting the appended <ul> tag to also reflect the <img> insertion? If so why not move the append before the .each() loop?
    – Ryan
    Nov 18, 2014 at 13:21
  • @Ryan You really catch what I mean. I want the appended <ul> tag to also reflect the <img> insertion. Here I just simplify my case, actually, the appended <ul> is added by click, so I want to ensure that the <img> can be inserted even the <ul> is added later.
    – liyuhao
    Nov 18, 2014 at 13:26
  • @liyuhao so, once again: call $(".link a").each(function() { after <ul> is appended. Fiddle.
    – Regent
    Nov 18, 2014 at 13:29

2 Answers 2

1

If I understand you correctly, I think you want to have an .on() attached to the body to listen for newly appended tags so that you may do insertions on any tags in that .

Based on your reply to my comment I think you're going to have to do that in your click handler of what ever is being clicked...

$('selector').click(function(e){
  // add your new ul here
  // call imagify to add <img> to <a>
  imagify(e);
});

function imagify(e) {
  $(".link a").each(function() {
        if ($(this).find('img').length == 0) {
            var a_href = $(this).attr('href');
            var parser = document.createElement('a');
            parser.href = a_href;

            if (parser.hostname == "www.1.com") {
                $(this).append('<img src="1.jpg"/>');
            } else if (parser.hostname == "www.2.com") {
                $(this).append('<img src="2.jpg" />');
            }
        }
    });
}
0

Switch it around and use .appendTo(), so that .on() can be chained correctly:

$("<ul><li class='link'><a href='http://www.2.com'></a></li></ul>").appendTo('body').on(/*...*/);
1
  • My problem is: I want the appended <ul> tag to also reflect the <img> insertion. Here I just simplify my case, actually, the appended <ul> is added by click, so I want to ensure that <img> can be inserted even the <ul> is added later.
    – liyuhao
    Nov 18, 2014 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.