1

私はこの質問をできる限り表現しようとしました...それが明確でなかった場合は申し訳ありませんが、ここに私の問題があります。

これは私の.jsファイルです」

 $(function()
 {
     $(".dropup").on("click", function(e) { alert(''); });

     $(".chat-friend").click(newChat);
 });


 function newChat()
 {          
    var chatboxExpandedHTML = '<ul id="chatwindow-expanded" class="dropdown-menu">' +
                            '<li><span style="background-color:red"></span></li>' +
                            '<li><b>Bob:</b></li>' +
                            '<li>I like mashed taters.</li>' +
                            '<li><b>You</b></li>' +
                            '<li>I like mashed taters too.</li>' +
                            '<li>And chicken too.</li>' +
                            '<li><b>Bob:</b></li>' +
                            '<li>We can\'t be friends any more.</li>' +
                            '<li><input type="text" class="chatter" placeholder="Type something…"></li>' +
                            '<li class="divider"></li>' +
                          '</ul>';
    var chatboxMiniHTML = '<li class="dropup">' +
                          '<span class="message-box dropdown-toggle" data-toggle="dropdown"><b>Test123</b></span>'
   + chatboxExpandedHTML +
                          '</li>';


    $('#chatbar-center').append(chatboxMiniHTML);
 }

必要な場合に備えて、ここにビューがあります。

<%@ Control Language="C#" ClassName="Octgn.App.c" %>
<link href="../../Content/css/ChatbarStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Content/js/chatservice.js" type="text/javascript"></script>

<div class="chatbar">
    <div class="navbar">
        <div class="navbar navbar-fixed-bottom">
            <div class="navbar-inner">
                    <ul id="chatbar-left" class="nav pull-left">
                        <li><a href="#"><i class="icon-cog icon-white"></i>Settings</a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul id="chatbar-center" class="nav">

                    </ul>
                    <ul id="chatbar-right" class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li class="chat-availability"></li>
                        <li class="dropup">
                          <a href="#" id="friends" class="dropdown-toggle" data-toggle="dropdown">Friends(1)</a>
                          <ul id="friendslist" class="dropdown-menu">
                            <li><a href="#" class="chat-friend">Alice</a></li>
                            <li><a href="#" class="chat-friend">Bob</a></li>
                            <li class="divider"></li>
                          </ul>
                        </li>
                        <li class="divider-vertical"></li>
                        <li class="notifications">1</li>
                    </ul>
                </div>
        <div>
    </div>
</div>

これが機能します。.chat-friendクラスの要素をクリックすると、クラス.message-boxの要素が＃chatbar-centerに正常に追加されます。そこに問題はありません。

作成されたボタンをクリックすると、クラス.chatwindow-expandedを含むドロップアップが作成されます。この要素には、入力が含まれています。

イベントが機能しないのは、メッセージボックスが作成されたときです。ドロップアップクラスのボットであっても、友達リストをクリックするとアラートが表示されますが、メッセージボックスは表示されません。

私はここで何が間違っているのですか？関数で作成されており、要素が作成される前にイベントが作成されているためですか？文字列が「\」ではなく「+」を使用しているためですか？それを使ってみましたが、ボタンも表示されず、「+」で表示されます。

このせいで頭がドキドキしています。.on（ "click"、...）と.click（...）のバリエーションをすでに試しました。$（'input'）や$（'li'）などを入れてみました...いろいろなものがあります。

4

1 に答える 1

0

関数で作成されており、要素が作成される前にイベントが作成されているためですか？

はい。この問題を解決するには、イベント委任を使用します

 $("#chatbar-center").on("click", '.dropup', function(e) { alert(''); });
 $("#chatbar-center").on('click', ".chat-friend", newChat);

これは、のすべての.dropup子孫が#chatbar-centerイベントにバインドされることを意味します（もちろん#chatbar-centerその時点で存在する必要があります）

于 2012-07-28T04:12:18.397 に答える