`
好好学习-天天向上
  • 浏览: 35913 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jQuery给动态元素绑定事件

 
阅读更多

最近坐项目有一个需求是点击添加按钮后,出现文本框及提交按钮,提交文本后,添加按钮再次显示,如此循环。但问题来了,在提交文本后,再次显示的添加按钮,点击后不会出现文本框及提交按钮,原来的click事件已经失效。具体代码如下

 

<div class="creation">
     <a href="#" class="create">
          添加
     </a>
</div>

 

$(function(){
    addText();
}
function addText() {
   $('.creation').on('click','a',function() {
        $('.creation').html('<form action="#" onsubmit="return false;"><input type="text" class="create-input" name="im" autofocus="" autocomplete="off"><button class="btn btn-primary btn-bm create-submit" onclick="createText();">添加</button> </form>');
        });
}
function createText(){
    $.post(url,{key:value},function(){
        $('.creation').html('<a href="#" class="create"> 添加新印象 </a>');
    })
}

 

 

修改后,成功的代码如下:

  $('creation').on('click', 'a', function() {} //将原先的lick事件修改一下:添加一个参数'a'.

 虽然是小点,但也是一个坑,在此希望大家一块跨越这个坑。

还有一点就是:只要是from表单都会有默认的提交行为,致使页面刷新,即使你使用ajax请求,解决方法:

<from anction="#" onsubmit="return false;"></form>

添加的return false,在别的事件也有应用比如<a>标签的默认跳转等等。

分享到:
评论

相关推荐

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

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

    jQuery为动态生成的select元素添加事件的方法

    7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面中的,我们依然可以捕捉到它们的事件。在这个例子中,为ID以`"sl_0"`开头的...

    layui动态绑定事件的方法

    在前端开发中,动态绑定事件是一项非常重要的技术,尤其是在处理动态创建的DOM元素时。本文将介绍使用layui框架来实现动态绑定事件的方法,并探讨其中的关键技术点。 首先,我们需要了解动态创建DOM元素后,原有的...

    JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind(...在绑定新click方法前对元素所绑定的click方法解绑

    浅谈Jquery为元素绑定事件

    关于Jquery为元素绑定事件的知识点,我们需要从几个方面...以上所述知识点,希望对于使用Jquery进行前端开发的人员有所帮助,能够让大家对Jquery元素绑定事件有更深入的理解,并在实际开发中正确、高效地使用相关方法。

    jQuery实现给input绑定回车事件的方法

    在jQuery中,给元素绑定事件通常有几种方式,而给input绑定回车事件主要涉及以下两种方法: #### 方法一:使用`.bind()`方法 jQuery的`.bind()`方法可以用于为选定的元素绑定事件处理函数。对于input元素绑定回车...

    JQuery给元素绑定click事件多次执行的解决方法

    事件委托允许你在父元素上绑定事件,而不是在每个子元素上,这样即使子元素是后来添加的,事件处理也会生效。例如: ```javascript $("#parentElement").on("click", "#sdfsd", function(e) { // 执行的代码 }); `...

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

    Jquery为单选框checkbox绑定单击click事件

    这是Jquery中的一个非常重要的方法,它确保了绑定事件的代码只会在DOM完全加载后执行,避免了因文档未完全加载而导致的脚本错误。 在总结上述知识点的同时,我们还应该注意一些常见的开发实践。例如,为了提高代码...

    jquery html动态添加的元素绑定事件详解

    jQuery为我们提供了一种非常方便的方法来为这些动态元素绑定事件。接下来,我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。 首先,需要了解的是,在jQuery中,传统的直接事件绑定方式(如使用`.click...

    jQuery中对未来的元素绑定事件用bind、live or on

    为了解决这个问题,jQuery提供了一些机制来为未来元素绑定事件,比如`bind`、`live`、`on`和`.one()`方法。 首先,我们要认识到,`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候,...

    JQuery调用绑定click事件的3种写法

    `.bind()`是jQuery中更通用的事件绑定方法,不仅可以绑定`click`事件,还可以绑定其他多种事件,如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子: ```javascript $('#clickmebind')....

    jquery1.10给新增元素绑定事件的方法

    本文将重点介绍在jQuery 1.10版本中给新增元素绑定事件的方法,特别是旧方法.live()的移除和新方法.on()的引入。 首先,.live()方法在旧版本的jQuery中被广泛使用,用于为动态添加到DOM中的元素绑定事件。然而,...

    多种jQuery绑定事件的实现方式

    在jQuery中,绑定事件是创建交互式网页的关键步骤。本文将深入探讨多种jQuery绑定事件的实现方式,并提供解决事件重复绑定问题的策略。 首先,让我们来看看jQuery如何绑定单个事件。基本语法是使用`.bind()`函数,...

    JQuery实现动态绑定和二级联动

    例如,当用户添加新项到下拉列表时,我们可以使用`$(document).on('event', 'selector', function() {...})`来动态绑定事件监听器,确保新项也能响应用户操作。 二、jQuery与DropDownList 在HTML中,DropDownList...

    jquery事件绑定例子

    这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...

    jQuery动态生成的元素绑定事件操作实例分析

    本文实例讲述了jQuery动态生成的元素绑定事件操作。分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用。当时我百思不得其解,各种找错都没找到错误...

    jQuery on()方法绑定动态元素的点击事件实例代码浅析

    3. 在jQuery中,直接为动态生成的元素绑定事件时可能会遇到问题,因为这些元素在初始绑定事件时还不存在于DOM中。为了解决这个问题,on()方法使用了事件委托机制,即将事件处理器绑定到一个静态父元素上,然后指定要...

Global site tag (gtag.js) - Google Analytics