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 类的下拉菜单，其中包含输入的元素，很好。

在创建消息框时，事件不起作用。当我单击朋友列表时会显示警报，但不会显示消息框，即使他们是 dropups 类中的机器人。

我在这里做错了什么？是因为它是在函数中创建的，并且事件是在创建元素之前创建的吗？是因为字符串使用的是“+”而不是“\”吗？我尝试使用它，但该按钮甚至不会显示，并且它与“+”一起使用。

因为这个，我的头在砰砰直跳。我已经尝试过 .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 回答