0

我有一个使用引导类 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 点击事件，并将新创建的元素附加到 #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），而不是进入下一行。

除了默认的引导样式外，还添加了以下内容：

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

请帮忙。谢谢

4

2 回答 2

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

I am using the bootstrap class "label label-info" to style the newly created span tags.

If i remove the class label label-info the code works fine.

$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>';

I am using a custom style now for span tags.

Thanks for help.

于 2012-12-30T07:44:04.530 回答
0

在“selectedtags”div 上尝试溢出：隐藏样式。

IE

<div class="span9">
     <div id = "selectedtags" class="well" style='overflow:hidden'>
     </div>
     <button class="btn" type="button" id="delegatecontent">Create report</button>
</div>
于 2012-12-29T14:00:15.827 回答