javascript - JQuery .click，也不是 .on ("click"，...) 使用函数创建的 ASP .NET 和 twitter-boostrap 元素

Question

我尝试尽我所能地措辞这个问题...如果不清楚，我很抱歉，但这是我的问题。

这是我的 .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);
 }

这是 View ，以防万一需要。

<%@ 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') 等......很多不同的东西。

Answer 1

Is it because it's being created in a function and the event is created before the element is created?

是的。使用事件委托(delegate)来解决这个问题

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

这意味着#chatbar-center的所有.dropup后代都将绑定(bind)到该事件(当然#chatbar-center需要当时存在)