Dynamic appendTo options

Question

This is some jQuery I use to create links out of system-generated comma separated lists and it always works well.

In a very special circumstance I need the script to add an iframe and open the link in it. I've come up with the following but can't get it to work. My question is, is it possible to push the script to work this way? And if so, where am I going wrong?

JQuery

$('.assigns').each(function() {
var obj = $(this),
    assigns = obj.text().split(','),
    i = 0,
    len = assigns.length;
if (obj.text()) {
    for (i; i < len; i++) {
        var assign = assigns[i].replace(/(^\s*)|(\s*$)/g, '');
        if (assign != "") {

            assigns[i] = '<a onclick="$(' <iframe style="width: 100%; height: 5.5em;" scrolling="no" name="frame" src="http://www.example.com"></iframe>').appendTo('#assign_frame');" title="Assign to '+assign+'" class="button_main_build">'+assign+'</a>';
        }
    }
    obj.html(assigns.join(' '));

}

});

The HTML

<div id="assign_frame"></div>

<p class="assigns">Bob Jones, Tom Smith, John Appleseed</p>

Do *not* use HTML string manipulation to do this! Use the DOM. It's there for a reason. — Ry-, Aug 07 '12 at 00:50

score 1 · Answer 1 · answered Aug 07 '12 at 00:58

Since you're using jQuery, you can do it the jQuery way.

var $links = $(); // empty jQuery container

for (i; i < len; i++) { 
  var assign = assigns[i].replace(/(^\s*)|(\s*$)/g, '');
  // Create jQuery link element
  // and attach events upon creation
  // allowing for delegation
  var $link = $('<a/>', {
    'class': 'button_main_build',
    href: '#',
    title: 'Assign to ' + assign,
    text: assign,
    click: function () {
      var $iframe = $('<iframe/>', {
        name: 'frame',
        src: 'http://www.example.com',
        scrolling: 'no',
      })
      $iframe.css({
        width: '100%',
        height: '5.5em'
      })
      .appendTo('#assign_frame')
    }
  });

  if (assign) 
    $links.add($link)
}

obj.append($links)

Thank you, this looks great; sadly I cannot get it to work at all. — James Mathieson, Aug 07 '12 at 01:08

Gordon Gustafson · Answer 2 · 2012-08-07T01:29:15.540

This is a better way to accomplish your desired goal:

$('.assigns').each(function() {
var obj = $(this),
    assigns = obj.text().split(','),
    len = assigns.length;
if (obj.text()) {
    for (var i=0; i < len; i++) {
        var assign = assigns[i].replace(/(^\s*)|(\s*$)/g, '');
        if (assign != "") {
            obj.append( $('<a title="Assign to ' + assign + '" class="button_main_build">'+assign+'</a>') );
        }
    }
}
});

$(".button_main_build").live('click', function() {   
    $('<iframe style="width: 100%; height: 5.5em;" scrolling="no" name="frame" src="http://www.example.com"></iframe>').appendTo('#assign_frame');
});

Thank you, but that outputs the following: ').appendTo('#assign_frame');" title="Assign to '+assign+'" class="button_main_build">'+assign+' — James Mathieson, Aug 07 '12 at 00:48

Dynamic appendTo options

2 Answers2