动态追加到选项

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

这是一个更好的方式来实现自己的理想目标：

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

Answer 2

由于您使用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)