动态appendTo选项

Question

这是我用来在系统生成的逗号分隔列表之外创建链接的一些jQuery，它总是工作得很好。

在一个非常特殊的情况下，我需要脚本来添加一个iframe，并打开其中的链接。我想出了以下方法，但无法使其正常工作。我的问题是，有没有可能让脚本以这种方式工作？如果是这样，我错在哪里呢？

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

}

});

HTML

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

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

Answer 1

既然你使用的是jQuery，你可以用jQuery的方式来做。

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)

Answer 2

这是实现预期目标的更好方法：

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