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

标签 javascript jquery asp.net asp.net-mvc-3 drop-down-menu

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

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

最佳答案

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需要当时存在)

关于javascript - JQuery .click,也不是 .on ("click",...) 使用函数创建的 ASP .NET 和 twitter-boostrap 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11698148/

相关文章:

javascript - 在 jasmine 指令 Controller 中返回一个 promise

javascript - 为什么函数执行后事件监听器不立即被删除?

asp.net - 在 ASP.NET 网站中使用 LoadLibrary 加载非托管 DLL

javascript - 无法从 HTML 输入元素 ASP.NET 读取 JSON 数据

c# - Gridview 绑定(bind)不起作用

javascript - 循环遍历数组中的字符,对于 3 个字符的每种可能的组合运行代码?

javascript - 当按钮和功能位于单独的文件中时,如何在 react.js 中创建弹出窗口?

javascript - 如何在 jQuery click() 函数中访问调用元素的 id

javascript - JQuery 复杂的选择器问题

设置 contentType 时 jquery ajax 不工作