0

次のリソースから、 bootstrap-tagsinputライブラリのソース JS と CSS をダウンロードしました: http://timschlechter.github.io/bootstrap-tagsinput/examples/

私のasp.net Webサイトでは、次のように使用しました：

 <asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />

 <script type="text/javascript">
    $('input #txtCompany').tagsinput();
    alert($('input #txtCompany').val());
 </script>

しかし、アラートは実際には私が作成したタグを返すはずですが、代わりに以下を返します:undefined

JS は で書かれていMaster Pageます。すべての CSS および JS リファレンスも に記載されていMaster Pageます。

ここで何が問題ですか？

編集 ：

TextBox は次のようにレンダリングされます。 ここに画像の説明を入力

編集 ：

次のjQueryコードで、divの内容を取得できました。

 $('#btn').click(function () {
                var div = document.getElementById("div");
                var spans = div.getElementsByTagName("span");

                for (i = 0; i < spans.length; i++) {
                    alert(spans[i].innerHTML);
                }
            });

しかし問題は、それが以下を返すことです:

ここに画像の説明を入力

そして、別の空のアラートも表示されます! どうしてか分かりません！

4

2 に答える 2

2

2 つのオプションがあります。最初の 1 つは、ID をブラウザで解析されたものに置き換えることです。

<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />

<script type="text/javascript">
    $('input #ContentPlaceHolder1_txtCompany').tagsinput();
    alert($('input #ContentPlaceHolder1_txtCompany').val());
 </script>

または、2 番目の解決策としてテキスト ボックスにクラスを追加し、jquery コードの ID を ID ではなくクラス名に置き換えます。

<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" class="form-control txtcomp" placeholder="Add Company" />

<script type="text/javascript">
    $('input .txtcomp').tagsinput();
    alert($('input .txtcomp').val());
 </script>

試してみて、うまくいくと思います

編集 この機能を使用して、追加されたアイテムの値をアラートに表示できます

 $('input').on('itemAdded', function (event) {
     alert(event.item)
 });
于 2015-08-17T12:09:05.433 に答える