`

jQuery想了所有相同ID属性的div绑定一个事件

 
阅读更多
案例:
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
<div id="div1">内容</div>
问题:
$("div1").bind("click",function(){
     alert($(this).val());
});
我们绑定到了div1,当我们点击div时,只有第一个div 弹出了alert了,其它的都没有弹出。
目标:
    想了每一个div都绑定一个事件
解决:
$("div1").live("click",function(){
     alert($(this).val());
})
以下绑定事件方法的区别:
    bind:为每个匹配元素的特定事件绑定事件处理函数;
    live:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效;
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jquery监听DIV的事件

    本篇文章将深入探讨如何使用jQuery来监听一个DIV元素的事件,以便于我们在其状态变化时执行相应的代码。 首先,理解jQuery中的事件处理是非常重要的。jQuery提供了丰富的API来绑定和触发DOM元素上的事件。在jQuery...

    jquery监听div内容的变化具体实现思路

    上述代码中,我们通过bind()方法为ID为laneconfigdisplay的div绑定了一个名为contentchanged的自定义事件,然后在适当的地方通过trigger()方法触发这个事件。但是这里contentchanged事件的具体实现并没有详细说明,...

    JQuery-DIV弹窗

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画效果等方面。"JQuery-DIV弹窗"是指利用jQuery实现的一种弹出窗口效果,通常用于显示通知...

    jquery 滑动DIV

    在网页设计和开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了DOM操作、事件处理、动画制作等任务。本教程将详细讲解如何利用jQuery实现一个滑动DIV的效果,适用于图片轮播或移动端应用的界面交互。 首先...

    移动div(jquery)

    这段代码在页面加载完成(`$(document).ready`)后,会给id为"myDiv"的div绑定一个点击事件。当用户点击这个div时,它会向右下方移动50像素,动画过程持续1000毫秒(即1秒)。`animate`函数是jQuery的核心,它可以...

    jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。

    在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的...

    jquery实现动态改变div宽度和高度

    在文章中提供的HTML代码中,我们定义了一个div元素,并通过id属性给它一个标识符"keleyidiv"。同时,页面上还放置了四个按钮,分别对应增加宽度、减少宽度、增加高度和减少高度的操作。通过id属性给这些按钮也做了...

    jQuery插件集之(弹出div2)+Demo

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。本篇文章将深入探讨一个基于jQuery的插件,标题为"jQuery插件集之(弹出div2)+Demo",该插件主要用于在...

    Jquery弹出DIV

    "Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框(通常称为弹出窗口或浮层),在网页上显示额外的信息或者进行一些用户交互。模态对话框通常是网页中的一个浮动元素,可以覆盖页面的其他部分,直到用户...

    jQuery鼠标上下拖动div排序代码

    本文将深入探讨如何利用jQuery库实现鼠标上下拖动div进行排序的功能,同时结合描述中的内容,我们会看到一个实例,该实例不仅支持div的拖动排序,还包含了一个左上角的按钮,用于触发其他操作。 首先,jQuery是...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    JQuery 模式对话框DIV

    例如,可以绑定一个按钮来触发对话框: ```html &lt;button id="openBtn"&gt;打开对话框 $(document).ready(function() { $("#dialog").dialog({ // 配置选项... }); $("#openBtn").click(function() { $("#...

    jQuery实现动态添加和删除一个div

    比如,在添加一个div之后,如果我们想要为这个div绑定事件处理函数,而这个事件处理函数在div被重复添加时会导致多个事件处理器被绑定,这就需要使用到事件的绑定和销毁技术。通常,我们使用`unbind()`方法来移除...

    jquery实现html页面增加删除一个div

    `addBox`函数创建一个新的`div`元素,设置其类为`box`,并添加一个`data-box-id`属性以跟踪已有的`div`数量。`removeBox`函数首先检查是否有可删除的`div`,如果有,则移除最后一个`div`。 通过这样的实现,我们...

    jquery div 弹出框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。"jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。...

    select实现div图层切换效果(jquery实现)

    这段代码首先在文档加载完成后运行,然后绑定一个事件处理器到select元素的change事件。当用户更改select选项时,会隐藏所有图层并显示与新选择值相对应的图层。 总结起来,这个例子展示了如何结合HTML的select元素...

    JQuery 动态生成DIV、Table并处理数据

    例如,创建一个带有特定ID的DIV:`$('&lt;div&gt;', {id: 'myDiv'})`。 - **添加内容**:通过`.html()`或`.append()`方法可以向元素中添加文本或HTML。如:`$('div').html('&lt;p&gt;Hello, World!&lt;/p&gt;')`。 - **插入元素**:`...

    一个jQuery插件用于数据绑定的HTMLRender模板引擎

    这款插件是jQuery的一个扩展,它提供了一种简洁的语法来将数据与HTML结构进行绑定,使得动态生成和更新页面内容变得更加简单。本文将深入探讨HTMLRender的核心功能、工作原理以及如何在实际项目中应用。 一、...

    点击后可以展示到前端的div层jquery效果

    在这个例子中,我们创建了一个按钮和一个div层,按钮绑定了一个点击事件,当点击按钮时,div层会以淡入淡出的方式显示或隐藏。`$(document).ready()`确保在页面加载完成后执行jQuery代码,`$("#toggleBtn")`选择了id...

    table 绑定数据 jquery 分页

    示例代码中,首先定义了一个HTML页面结构,包括一个按钮`#btnSearch`用于触发搜索,一个输入框`#txtSearch`用于输入搜索条件,以及一个`div`容器`#divSearchResult`用于展示搜索结果。 #### 2.2 使用JQuery进行事件...

Global site tag (gtag.js) - Google Analytics