最近坐项目有一个需求是点击添加按钮后,出现文本框及提交按钮,提交文本后,添加按钮再次显示,如此循环。但问题来了,在提交文本后,再次显示的添加按钮,点击后不会出现文本框及提交按钮,原来的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中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面中的,我们依然可以捕捉到它们的事件。在这个例子中,为ID以`"sl_0"`开头的...
在前端开发中,动态绑定事件是一项非常重要的技术,尤其是在处理动态创建的DOM元素时。本文将介绍使用layui框架来实现动态绑定事件的方法,并探讨其中的关键技术点。 首先,我们需要了解动态创建DOM元素后,原有的...
原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind(...在绑定新click方法前对元素所绑定的click方法解绑
关于Jquery为元素绑定事件的知识点,我们需要从几个方面...以上所述知识点,希望对于使用Jquery进行前端开发的人员有所帮助,能够让大家对Jquery元素绑定事件有更深入的理解,并在实际开发中正确、高效地使用相关方法。
在jQuery中,给元素绑定事件通常有几种方式,而给input绑定回车事件主要涉及以下两种方法: #### 方法一:使用`.bind()`方法 jQuery的`.bind()`方法可以用于为选定的元素绑定事件处理函数。对于input元素绑定回车...
事件委托允许你在父元素上绑定事件,而不是在每个子元素上,这样即使子元素是后来添加的,事件处理也会生效。例如: ```javascript $("#parentElement").on("click", "#sdfsd", function(e) { // 执行的代码 }); `...
**jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...
这是Jquery中的一个非常重要的方法,它确保了绑定事件的代码只会在DOM完全加载后执行,避免了因文档未完全加载而导致的脚本错误。 在总结上述知识点的同时,我们还应该注意一些常见的开发实践。例如,为了提高代码...
jQuery为我们提供了一种非常方便的方法来为这些动态元素绑定事件。接下来,我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。 首先,需要了解的是,在jQuery中,传统的直接事件绑定方式(如使用`.click...
为了解决这个问题,jQuery提供了一些机制来为未来元素绑定事件,比如`bind`、`live`、`on`和`.one()`方法。 首先,我们要认识到,`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候,...
`.bind()`是jQuery中更通用的事件绑定方法,不仅可以绑定`click`事件,还可以绑定其他多种事件,如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子: ```javascript $('#clickmebind')....
本文将重点介绍在jQuery 1.10版本中给新增元素绑定事件的方法,特别是旧方法.live()的移除和新方法.on()的引入。 首先,.live()方法在旧版本的jQuery中被广泛使用,用于为动态添加到DOM中的元素绑定事件。然而,...
在jQuery中,绑定事件是创建交互式网页的关键步骤。本文将深入探讨多种jQuery绑定事件的实现方式,并提供解决事件重复绑定问题的策略。 首先,让我们来看看jQuery如何绑定单个事件。基本语法是使用`.bind()`函数,...
例如,当用户添加新项到下拉列表时,我们可以使用`$(document).on('event', 'selector', function() {...})`来动态绑定事件监听器,确保新项也能响应用户操作。 二、jQuery与DropDownList 在HTML中,DropDownList...
这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...
本文实例讲述了jQuery动态生成的元素绑定事件操作。分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用。当时我百思不得其解,各种找错都没找到错误...
3. 在jQuery中,直接为动态生成的元素绑定事件时可能会遇到问题,因为这些元素在初始绑定事件时还不存在于DOM中。为了解决这个问题,on()方法使用了事件委托机制,即将事件处理器绑定到一个静态父元素上,然后指定要...