Question

我有一个html div，它使用bootstrap类span9进行样式设计。

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

我想要实现的是，在下面的li标签上写一个jquery click事件（实际上是20+ li标签），并将新创建的元素追加到#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

类标签label-info导致此问题。

$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标签使用自定义样式。

感谢您的帮助。

Answer 2

在“selectedtags”div上尝试overflow：hidden style。

即

<div class="span9">
     <div id = "selectedtags" class="well" style='overflow:hidden'>
     </div>
     <button class="btn" type="button" id="delegatecontent">Create report</button>
</div>

JQuery追加元素是否超出父div宽度？

2 个答案: