`
merry爱编程
  • 浏览: 9767 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类

jquery 为新元素追加事件问题

阅读更多
在网上看了四种为新元素追加事件的方法。
觉得其中一个方法可以改进一下。
就表格问题说:
原方法是这样:
$(document).ready(function(){

$(':button[value="删除"]').click(function(){
$(this).parents('tr').remove();
});

$(':button[value="新增"]').click(function(){

$('<tr><td>'+$(':text').val()+'</td><td><input type="button" value="删除" /></td></tr>')
.find(':input')
.click(function(){
$(this).parents('tr').remove();
})
.end()
.appendTo($('table'));

});

});

是先在你要加的元素上找到文本框,加事件,然后退回破坏性操作前,在加该元素、
这样也太麻烦了。
为什么不在新增元素后,同时追加事件呢?
改进之后:
$(document).ready(function(){

function deltr(){
        $(this).parents("tr").remove();
    };

$(':button[value="删除"]').click(deltr);




$(':button[value="新增"]').click(function(){
$('table tr:last-child ').after('<tr><td>新增行</td><td><button value="删除">删除</button></td></tr>');

$(':button[value="删除"]').click(deltr);
});


});
多简单啊。

分享到:
评论

相关推荐

    jQuery动态追加页面数据以及事件委托详解

    标题和描述中提到的“jQuery动态追加页面数据以及事件委托详解”,涉及的两个主要知识点是:jQuery动态追加页面数据和jQuery事件委托。详细内容包括如何使用jQuery技术向页面动态追加内容,并利用事件委托处理动态...

    jQuery实现动态添加、删除按钮及input输入框的方法

    在内容中还提到了一些重要的jQuery主题和资源链接,例如《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》等,这些资源可以作为读者深入了解和学习jQuery的扩展资料。 本篇文章提供的代码实例,以...

    jQuery教程PDF及源码

    // 将新元素追加到已选取的元素后面 ``` ### 四、事件处理 jQuery的事件处理方式简洁明了,可以使用`.on()`方法绑定事件,`.click()`, `.hover()`, `.change()`等是常见的事件处理函数。例如: ```javascript $(...

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    jQuery入门教程.zip

    // 将新元素追加到ID为container的元素内部 ``` 事件处理是jQuery的另一大亮点。通过`.on()`方法,可以为元素绑定各种事件,如点击、改变等。例如: ```javascript $("#myButton").on("click", function() { ...

    jQuery DOM 2.pptx

    通过 jQuery,可以很容易地添加新元素/内容。 append() // 在被选元素的结尾插入内容 prepend() //在被选元素的开头插入内容 after() //在被选元素之后插入内容 before() //在被选元素之前插入内容 1、jQuery增加...

    jQuery编程笔记

    #### 五、jQuery事件编程 1. **绑定事件** - `$.on()`: 绑定事件处理器到被选元素的一个或多个事件。 - `$.one()`: 绑定一次性事件处理器。 2. **触发事件** - `$.trigger()`: 触发被选元素的某个事件。 - `$....

    jquery基础知识总结

    - 使用 `.after()` 和 `.before()` 在匹配元素前后插入新元素。例如:`$("div").after("新内容&lt;/p&gt;")`。 3. **复制元素** - 使用 `.clone()` 复制元素。例如:`var clonedDiv = $("div").clone()`。 4. **移除...

    jquery 实用基础小例子

    这里,`append()`方法将新元素追加到`body`元素的末尾。 事件处理是jQuery的另一个强项。使用`on()`方法可以绑定事件监听器。例如,当点击某个元素时弹出提示框: ```javascript $("#myButton").on("click", ...

    Jquery元素追加和删除的实现方法

    3. 添加元素节点:使用JQuery的append()方法可以将新的内容追加到匹配的元素内部。例如,$("ul").append("新元素&lt;/li&gt;")会将新创建的li元素添加到ul元素内部。另外,prepend()方法则是用于将新内容添加到每个匹配...

    jQuery复制表单元素代码.zip

    例如,将复制的输入框追加到ID为"container"的元素后面: ```javascript $("#container").append(clonedInput); ``` 4. **事件委托**:当动态添加元素时,需要考虑事件处理。由于新复制的元素在复制时并未存在于...

    jQuery设计思想

    jQuery 简化了事件处理的过程,提供了丰富的事件处理方法。 **事件操作示例**: - `.on('click', function())`:为元素绑定点击事件。 - `.trigger('click')`:触发点击事件。 - `.off('click')`:移除点击事件...

    jquery 瀑布

    jQuery提供了一系列方法来操作DOM元素,如`append()`用于在元素内部追加内容,`prepend()`用于在元素内部前置内容,`css()`用于设置或获取元素样式,这些在布局调整时非常有用。 4. **jQuery动画** jQuery的动画...

    jquery案例.doc

    解决这个问题的方法是在加载完Prototype之后再加载jQuery,并调用`jQuery.noConflict()`函数。 ```html &lt;script src="prototype.js"&gt;&lt;/script&gt; &lt;script src="http://blogbeta.blueidea.com/jquery.js"&gt; jQuery....

    jquery要点分析

    2. 插入元素:jQuery 提供了`.before()`, `.after()`, `.prepend()`, 和 `.append()`等方法来在现有元素之前或之后插入新元素,或者在元素内部的开头或结尾添加内容。 ```javascript // 在 #myElement 之前插入一个...

    JQuery1.3笔记.txt

    - `$("元素名称").clone(true)`: 复制指定元素及其子元素,如果传入参数为`true`则同时复制事件绑定。 3. **清空内容** - `$("元素名称").empty()`: 清空指定元素的所有内容。 4. **移除元素** - `$("元素...

    jQuery第六部分共七部分

    - **元素的添加与删除**:掌握如何使用`append()`, `prepend()`, `before()`, `after()`等方法添加新元素;使用`remove()`方法删除元素。 - **元素属性的获取与设置**:学习如何使用`attr()`方法获取和设置元素属性...

    jquery 1.4.2资料

    // 在每个段落后追加一个新元素 $("p").after("这是新元素&lt;/span&gt;"); ``` 三、事件处理(Event Handling) jQuery简化了事件处理的编写,如`click()`, `focus()`, `blur()`等。例如,我们可以这样为按钮添加点击...

    jQuery api (docs)1.1.2

    jQuery 是一款轻量级的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。jQuery 的设计哲学是“Write Less, Do More”,即“写得更少,做得更多”。此文档详细介绍了 jQuery ...

    jquery基础教程高清版PDF.part5.rar

     1.2 jQuery为什么如此出色   1.3 第一个jQuery文档   1.3.1 下载jQuery   1.3.2 设置HTML文档   1.3.3 编写jQuery代码   1.4 小结  第2章 选择符——取得你想要的一切   2.1 DOM   2.2 ...

Global site tag (gtag.js) - Google Analytics