javascript - JQuery 追加元素超出父 div 宽度？

Question

我有一个使用 bootstrap 类 span9 设置样式的 html div。

<div class="span9">
     <div id = "selectedtags" class="well">
     </div>
     <button class="btn" type="button" id="delegatecontent">Create report</button>
</div>

我想要实现的是，在以下 li 标签(实际上有 20 多个 li 标签)上编写一个 jquery click 事件，并将新创建的元素附加到 #selectedtags div 中。

<li class="dbcol">Location_Id</li>
<li class="dbcol">Location_Name</li>
<li class="dbcol">Location_EN</li>

以下是我的 javascript (Jquery) 代码，用于在 #selectedtags div 内附加 span 标签。

$(document).ready(function() {  
            $('.dbcol').live('click', function () {
                var str = "";
                str = $(this).closest("ul").attr("id");
                var master_name = "";
                if (str == "countryselect") {master_name = "Country_Master"}
                if (str == "stateselect") {master_name = "State_Master"}
                if (str == "locationselect") {master_name = "Location_Master"}
                if (str == "hotelselect") {master_name = "Hotel_Master"}      
                var $newelement = "";

                $newelement += '<span class="label label-info isr" style="margin-top:3px; margin-bottom:2px; margin-right:5px; margin-left:3px; padding:2px;" id = ' +str+ '>';
                $newelement += master_name + '.';
                $newelement += $(this).text() + "  ";
                $newelement += '<i class="icon-remove icon-white"></i>';
                $newelement += '</span>';

                $(this).remove();
                $("#selectedtags").append($newelement);
            });

            $("i").hover(
            function () {
                $(this).removeClass('icon-white');
            });


            $('i').live('click',function() {
                var id = '#'
                id += $(this).closest("span").attr("id");
                var trt = $(this).closest("span").text();
                trt = trt.substring(trt.indexOf('.')+1);
                $(id).append('<li class="dbcol">' + trt +'</li>');
                $(this).closest("span").remove();
            });

            $("#delegatecontent").live('click',function() {
                var strqw ="";
                var final_string = "Select ";
                $('.isr').each( function() {
                    var df = $(this).text();
                    if (strqw == ""){
                        strqw += df;
                    }
                    else
                    {
                        strqw += ', '; 
                        strqw += df;
                    }
                });
                final_string += strqw;               
                alert (final_string);
            });
        });

一切正常，Jquery 代码确实在 div 中附加了新创建的 span 标签，但是新标签超出了 div 宽度 (span9) 而不是进入下一行。

除了默认的 bootstrap 样式外，还添加了以下内容:

body {padding-top: 40px; padding-bottom: 40px; font-family: 'Monda', sans-serif;}
ul li {cursor: pointer;}            

请帮忙。谢谢

Answer 1

类标签标签信息导致此处出现问题。

$newelement += '<span class="label label-info isr" style="margin-top:3px; margin-bottom:2px; margin-right:5px; margin-left:3px; padding:2px;" id = ' +str+ '>';
$newelement += master_name + '.';
$newelement += $(this).text() + "  ";
$newelement += '<i class="icon-remove icon-white"></i>';
$newelement += '</span>';

我正在使用 Bootstrap 类“label label-info”来设置新创建的 span 标签的样式。

如果我删除类标签 label-info 代码工作正常。

$newelement += '<span class="isr" style="margin-top:3px; margin-bottom:2px; margin-right:5px; margin-left:3px; padding:2px;" id = ' +str+ '>';
$newelement += master_name + '.';
$newelement += $(this).text() + "  ";
$newelement += '<i class="icon-remove icon-white"></i>';
$newelement += '</span>';

我现在为 span 标签使用自定义样式。

感谢您的帮助。