0

ブートストラップクラスspan9を使用してスタイル設定されたhtmldivがあります。

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

私が達成しようとしているのは、次のliタグ（実際には20以上のliタグ）にjqueryクリックイベントを記述し、新しく作成された要素を#selectedtagsdiv内に追加することです。

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

以下は、＃selectedtags div内にスパンタグを追加するためのJavaScript（Jquery）コードです。

$(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に追加しますが、新しいタグは次の行ではなくdiv幅（span9）から外れます。

デフォルトのブートストラップスタイルに加えて、以下が追加されます。

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

助けてください。ありがとう

4

2 に答える 2

1

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

ブートストラップクラス「labellabel-info」を使用して、新しく作成されたスパンタグのスタイルを設定しています。

クラスラベル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>';

現在、スパンタグにカスタムスタイルを使用しています。

手伝ってくれてありがとう。

于 2012-12-30T07:44:04.530 に答える
0

"selectedtags" div で overflow:hidden スタイルを試してください。

すなわち

<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 に答える