为什么当某些内容已加载时 jQuery 会丢失“事件”(点击)?

2024-04-12

当我在侧边栏上选择页面时,我尝试使用下一个脚本加载内容。该脚本运行没有问题:

if(Modernizr.history) {     
    var newHash      = "",
        $wrapperTag = $("#main-content"),
        contentTag = '#main-content-inside',
        activeClass = 'active';
    
    $("#sidebar").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);

        loadContent(_link);
        return false;
    });

    function loadContent(href){
        
        $wrapperTag
                .find(contentTag)
                $wrapperTag.load(href + " "+contentTag+" ", function(response, status, xhr) {

                        $("#sidebar a").removeClass(activeClass);
                        $('#sidebar a[href$="'+href+'"]').addClass(activeClass);
                        
                        $("#menu").bind('click',function(){
                            $(this).showSidebar();
                        });

                    });
        
    }

这个脚本可以正常工作,我的 HTML 模板看起来像这样:

HTML模板

<div id="sidebar">
    <nav>
        <ul class="ul-vert">
            <li><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
            ...
            <li><a href="pageN.html">Page N</a></li>
        </ul>
    </nav>
 </div>

 <div id="main-content">
     <div id="main-content-inside">
         <p id="menu">Show / Hide Sidebar</p>
        <div class="text desc">(Content)</div>  
     </div>
 </div>

我有一个标签是p#menu作为显示或隐藏侧边栏的选项。这只是有效的直到我加载任何页面然后我就失去了click event.

所以基本上我的问题是:

为什么jQuery在更改内容后丢失事件? 我可以解决这个问题,再次添加 p#menu on加载内容函数,但我想了解 jQuery 是如何工作的。

Thanks!


$('.fatherDiv').on('click','.childDiv', {} ,function(e){
 //insert your code here
})

这不仅会在现在将事件处理程序绑定到 DOM 选择器元素,而且在将来也会将事件处理程序绑定到 DOM 选择器元素(在绑定之后添加到 DOM 的选择器)。现在,即使添加特定选择器或用新 DOM 元素替换特定选择器,也会触发 click 事件。


阅读此处了解更多信息:
http://blog.revathskumar.com/2013/10/jquery-on-avoid-losing-event-binding-for-ajaxed-contents.html http://blog.revathskumar.com/2013/10/jquery-on-avoid-losing-event-binding-for-ajaxed-contents.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么当某些内容已加载时 jQuery 会丢失“事件”(点击)? 的相关文章

  • CSS隐藏滚动条,但元素可滚动

    我有一个名为 items 的元素 元素内的内容更长 比元素高度 我想让它可滚动但隐藏滚动条 我该怎么做呢 div class left side div class items style display block width 94 ma
  • jquery 动态 iframe - !document.write 和 IE 问题

    为什么这在所有浏览器中都有效 除了 IE var iframe var doc iframe contents doc find head append 但是 如果我在 document write 中使用非 jquery 对象 它在 IE
  • 上传非常大的文件(>5GB)

    我需要你的帮助 我想用 HTML JQuery 和 PHP 创建一个上传脚本 是否可以编写一个可以上传非常大的文件 gt 5 GB 的脚本 我已经尝试使用 FileReader FormData 和 Blobs 但即使使用这些 我也无法上传
  • Asp.Net Mvc/ jQuery 中带进度条的文件上传?

    我正在寻找一个用于 Asp Net MVC 的带有进度条的文件上传的 jQuery 插件 我们在现有的 Asp Net WebForm 应用程序中使用 RadUpload 控件 它在不使用 Flash Silverlight 的情况下显示状
  • 音频标签的 Html5 惰性“onplay”事件处理程序?

    使用新的 Html5 音频标签 onplay 事件似乎仅在第一次播放音频时触发 在此示例中 当单击 播放 时 音频将开始并显示一个显示 正在播放 的警报弹出窗口 当音频结束并再次单击 播放 时 音频会再次开始 但不会触发警报 我在这里错过了
  • Javascript图像编辑插件

    在哪里可以找到 Javascript 或 jQuery 图像编辑器插件 用户可以单击图像进行编辑 并且该插件允许他们进行裁剪 调整大小 旋转 翻转等 Pixastic http pixastic com lib 不再活跃 和CamanJS
  • 表单输入不会采用百分比填充

    如果使用像素填充 我的表单输入会正确显示 但使用左侧和右侧的百分比填充会破坏它 我不明白为什么 它可以在 Safari 中运行 但在 Firefox 3 5 3 OSX 中损坏 问题是 当我使用百分比填充时 填充全部中断 因此输入值没有很好
  • JQuery - 使用变量处理多个元素的一个处理程序

    我有两个这样定义的变量 var a a b b 如何使用 a 和 b 重写以下行 a b click function e a get 0 b get 0 click function e
  • SVG 图标像素对齐?

    在此图像中 左侧 黑色 垃圾桶是图标字体 它的字体大小是 16px 这使得图标在 100 的时间里看起来都很清晰 两个蓝色垃圾桶是 SVG 它们具有完全相同的标记 其中之一happened一个是像素对齐的 另一个不是 我怎样才能强制我的 S
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • 从本地 html/javascript 网站插入 mySQL 数据库

    我正在尝试做什么 我的程序的目的是插入数据local HTML JS网站变成online 非本地 mySQL数据库 到目前为止我尝试过的 我试图用来实现此目的的原始方法是让我的本地网站使用 javascript 通过在线发布数据PHP文件
  • 如何创建共享网络目录或文件的超链接?

    我检查了以下两个相关讨论 1 如何创建指向本地可执行文件的超链接 https stackoverflow com questions 2815982 how do i make a hyperlink to a local executab
  • 检索受“rowspan”影响的行的列索引的最有效方法是什么?

    考虑下表 table thead tr th th th A th th B th th C th tr thead tbody tr th 1 th td Apples td td Oranges td td Pears td tr tb
  • getJson问题,它返回未定义

    大家好 我有这个代码 var temp if method 1 temp Words val get the words from textbox else getJSON http localhost mine test js funct
  • 如何让导航栏在向下滚动页面时改变颜色?

    我希望导航栏是透明的 但是当您向下滚动页面时 它会变为红色 div class nav div class container div class logo a href img src RepublicSquare logo svg st
  • 无需画布/显示器即可拍摄隐形 WebRTC/视频照片

    我读了拍摄静态照片 https developer mozilla org en US docs Web API WebRTC API Taking still photos来自 MDN 的描述如何从网络摄像头捕获照片 使用视频元素和med
  • 使用 jQuery 获取 JSON Facebook Graph API 用户信息

    我正在尝试使用图形 API 来获取有关用户的一些基本信息 无需用户授权 只需获取公共详细信息 我正在尝试使用 jQuery 和 getJSON 来获取数据并解析它 但我很难弄清楚如何访问我想要的键值对 我想要有类似的东西 var fburl
  • 使用外部按钮选择下一个/上一个单选按钮

    我正在制作一种幻灯片形式 当用户单击下一张图像时 还必须选择单选按钮 我的滑动功能可以正常工作 下一个按钮 也可以工作 但我有点坚持使用 上一个 按钮 不明白为什么它不起作用 fiddle http jsfiddle net V4tdx 这
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • 如何在控制台中隐藏日志消息的来源?

    当将消息输出到控制台时 还会显示源代码 在 Chrome 开发者工具中 它位于右侧 console log Foo Source Foo test js 1 Output 但是 在某些网站上 会显示消息without正在显示的源 例如Fac

随机推荐

  • R twitterR 包,尽管有限制但仍能获得关注者

    我一直在玩RtwitteR包 但还没有弄清楚如何实现一个系统来收集超过每小时最大数量的数据 Twitter 用户的关注者数量 我知道计划应该是收集最大数量 等待 X 时间 然后重复直到收集完所有内容 但是我该如何使用twitteR包裹 th
  • 使用 FFmpeg 在特定时间将一个视频叠加在另一个视频上

    我正在尝试将一个视频与另一个视频叠加 我按照OP发布的原始命令进行操作here https stackoverflow com questions 35269387 ffmpeg overlay one video onto another
  • MySQL 语法和“OR”性能

    这个 MySQL 查询工作得很好 SELECT o id FROM descriptions programs d titles programs t programs o WHERE d object id o id AND MATCH
  • 检测触摸屏(ipad、iphone 等)的最佳方法?

    如果在 ipad 或 iphone 等触摸屏设备上查看页面 我需要向页面加载一些额外的 CSS 最简单的方法是什么 谢谢 对于 iPad 您可以尝试 if window Touch alert touch my ipad iphone ip
  • 错误消息:JSFiddle 中不允许 document.write

    当我尝试在 JSFiddle 上运行我的 JavaScript 文件之一时 收到以下错误消息 document write 在 JSFiddle 环境中是不允许的 并且可能会破坏你的小提琴 我该如何解决这个问题 Note 当我使用外部资源时
  • 尝试部署到 Google Cloud Run 时出现权限错误

    我在尝试将映像部署到云运行时遇到权限错误 gcloud beta run deploy endpoints proxy image gcr io endpoints release endpoints runtime serverless
  • Google Drive HTTP 403“访问未配置”错误

    我正在尝试将 Salesforce 的 DrEdit 示例应用程序安装到 GAE 上 应用程序运行 但保存或打开文件会导致 HTTP 403 访问未配置错误 我还尝试将 API Access gt Client ID 的值用于 Web 应用
  • android 编辑文本背景

    我想设置为我的 EditText背景 http img9 imageshack us f backgroundtext png 嗯 我也不知道该怎么解释 当有大量文本时垂直滚动启用 当用户滚动文本时 我需要 滚动 背景 现在我知道 当用户滚
  • 如何从 Firebase 中的 Android 应用创建空表? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在 Android 平台上开发实时应用程序 我想在 Firebase 数据库中添加一个具有特定名称且没有信息的表 这可能吗 我该怎
  • 无法加载 ResolveComReference 任务

    Win7 VS2017 ASP Net core应用程序 目标框架是4 6 当我尝试使用 CLI 构建项目时 在调用 dotnet 命令之前需要它 会发生错误 C Microsoft Common CurrentVersion target
  • NanoScroller 不触发自身

    下面的代码应该能够触发pane and slider适当地displaycss 属性根据纳米滚动文档 http jamesflorentino github com nanoScrollerJS 但是 滚动条不显示slider直到我在浏览器
  • 连接两个php变量

    我从这样的表单中获取文本和颜色 代码在管理 php
  • Android Content Provider 的实例化顺序

    对于我的应用程序 我需要先启动一个内容提供程序 据我所知 该顺序与 AndroidManifest 中的顺序无关 并且不是按字母顺序排列的 如何控制 Android 调用 Content Provider 的 onCreate 方法的顺序
  • 如何使用 Open XML SDK 将文本插入内容控件

    我正在尝试开发一种解决方案 该解决方案从 ASP Net 网页获取输入并将输入值嵌入到 MS Word 文档中的相应内容控件中 MS Word 文档还具有静态数据 以及一些要嵌入到页眉和页脚字段中的动态数据 这里的想法是解决方案应该基于 W
  • Bamboo 能否将 HTTP 400 Bad 请求解释为失败

    我们正在使用 CURL 向我们的应用程序之一发出外部 API 请求 如果该请求返回的值不是 200 我们希望ebamboo 的 构建 失败 目前 它正在过去 此外 响应中的消息中包含 错误 一词 我希望 Bamboo 能够解析脚本结果并根据
  • 为什么添加文本会改变 div 的边距[重复]

    这个问题在这里已经有答案了 我不明白为什么添加文本 do a div 似乎会改变浏览器解析 div 的方式 看起来边距顶部已更改 但事实并非如此 HTML div div class nav left left div div class
  • Mongo - 更新嵌套数组中的元素[重复]

    这个问题在这里已经有答案了 我有一个看起来像的文档 id 123xyz profile emails address email protected cdn cgi l email protection primary true addre
  • 在 HTML 中呈现字符串并保留空格和换行符

    我有一个带有详细信息页面的 MVC3 应用程序 作为其中的一部分 我有一个包含空格和换行符的描述 从数据库检索 当它被渲染时 新行和空格将被 html 忽略 我想对这些空格和新行进行编码 以便它们不会被忽略 你是怎样做的 我尝试了 HTML
  • NodeJS - 大量请求关闭后“套接字挂起”

    我已经被这个 套接字挂断 错误困扰了几天 我希望有人可以帮助我 我目前设置了两个 Node 程序 Node 中的 HTTP 服务器对每个节点都使用相同的数据进行响应 要求 HTTP 服务器响应来自 HTTP 服务器 1 的数据 对于每个请求
  • 为什么当某些内容已加载时 jQuery 会丢失“事件”(点击)?

    当我在侧边栏上选择页面时 我尝试使用下一个脚本加载内容 该脚本运行没有问题 if Modernizr history var newHash wrapperTag main content contentTag main content i