jquery 动态创建元素，在元素山添加事件

最新推荐文章于 2022-06-19 19:02:32 发布
原创 最新推荐文章于 2022-06-19 19:02:32 发布 · 569 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文深入探讨了操作流程设计与交互体验优化的关键步骤，包括用户界面改进、响应速度提升和人性化反馈机制建立，旨在提高产品的用户体验。通过案例分析，展示了如何通过细致的设计和策略调整，实现从用户需求出发的产品迭代优化。 
 $('.l-children>li').each(function(i){
        var str = '';
        $(this).click(function(){
            $('.l-children>li>div').removeClass('l-selected');
            $('.l-children>li').eq(i).children('div').addClass('l-selected');
            var str = '';
            if(i == 1 || i ==4){
                str +='<form action="">';
                str +='<table class="table table-striped table-hover" id="tabel-input">';
                str +='<tr>';
                str +='<th><input type="checkbox" class="trclicks" value="123" id="trclicks" /></th>';
                str +='<th>参数名</th>';
                str +='</tr>';
                str +='<tr>';
                str +='<td><input type="checkbox" name="check" class="trclick" value="" /></td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='</table>';
                str +='<div class="form-group" style="margin:5px 0 0 0px;float: right">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div>';
                str +='<div class="form-group" style="margin:5px 10px 0 0px;float: right">';
                str +='<input type="button" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;" value="删除" ></div>';
                str +='<div class="form-group" style="margin:5px 10px 0 0px;float: right">';
                str +='<input type="button" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;" value="增加" id="add"></div>';
                str +='</form>';
            }else if(i == 2){
                str +='<form action="">';
                str +='<table class="table table-striped table-hover" ><tbody>';
                str +='<tr>';
                str +='<th><input type="checkbox" class="trclicks" value=""  /></th>';
                str +='<th>参数名</th>';
                str +='<th>参数值</th>';
                str +='</tr>';
                str +='<tr>';
                str +='<td><input type="checkbox" name="check[]" class="trclick" value="" /></td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;" id="field-1" placeholder=""></td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='</tbody></table>';
                str +='<div class="form-group" style="margin:5px 0 0 0px;float: right">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div></form>';
            }else if( i == 3){
                str +='<form role="form" class="form-horizontal" style="margin-top:15px;">';
                str +='<table class="tables"><tbody>';
                str +='<tr>';
                str +='<td>参数名</td>';
                str +='<td>参数值</td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>ParameterPath</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>NextLevel</td>';
                str +='<td>';
                str +='<select class="form-control" id="nextLevel" name="nextLevel">';
                str +='<option value="0">false</option>';
                str +='<option value="1">true</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>';
                str +='</tbody></table>';
                str +='<div class="form-group" style="margin:5px 0 0 400px">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div> </form>';
            }else if(i==5){
                str +='<form role="form" class="form-horizontal" style="margin-top:15px;">';
                str +='<table class="tables"><tbody>';
                str +='<tr>';
                str +='<td>参数名</td>';
                str +='<td>参数值</td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>Name</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>NotificationChange</td>';
                str +='<td>';
                str +='<select class="form-control" id="nextLevel" name="nextLevel">';
                str +='<option value="0">false</option>';
                str +='<option value="1">true</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>Notification</td>';
                str +='<td>';
                str +='<select class="form-control" id="notification" name="notification">';
                str +='<option value="0">关闭状态</option>';
                str +='<option value="1">被动上报</option>';
                str +='<option value="2">主动上报</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>AccessListChange</td>';
                str +='<td>';
                str +='<select class="form-control" id="accessListChange" name="accessListChange">';
                str +='<option value="0">false</option>';
                str +='<option value="1">true</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>AccessList</td>';
                str +='<td>';
                str +='<select class="form-control" id="accessList" name="accessList">';
                str +='<option value="0">Subscriber</option>';
                str +='<option value="1">empty</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>';
                str +='</tbody></table>';
                str +='<div class="form-group" style="margin:5px 0 0 400px">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div> </form>';
            }else if(i ==6 || i==7){
                str +='<form role="form" class="form-horizontal" style="margin-top:15px;">';
                str +='<table class="tables"><tbody>';
                str +='<tr>';
                str +='<td>参数名</td>';
                str +='<td>参数值</td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>objectName</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>parameterKey</td>';
                str +='<td>';
                str +='<input type="text" class="form-control" id="field-1" placeholder="">';
                str +='</td>';
                str +='</tr>';
                str +='</tbody></table>';
                str +='<div class="form-group" style="margin:5px 0 0 400px">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div> </form>';
            }else if(i==8){
                str +='<button class="btn btn-info btn-icon" style="margin-left: 10px">重启</button>';
                str +='<div style="width:100%;"> <table align="center"><tbody>';
                str +='<tr>';
                str +='<th>重启结果</th>';
                str +='<td id="errorInfo"></td>';
                str +='</tr>';
                str +='</tbody> </table></div>';
            }else if(i==9){
                str +='<button class="btn btn-info btn-icon" style="margin-left: 10px">恢复出厂设置</button>';
                str +='<div style="width:100%;"> <table align="center"><tbody>';
                str +='<tr>';
                str +='<th>操作结果</th>';
                str +='<td id="errorInfo"></td>';
                str +='</tr>';
                str +='</tbody> </table></div>';
            }else if(i==10){
                str +='<form role="form" class="form-horizontal" style="margin-top:15px;">';
                str +='<table class="tables" ><tbody>';
                str +='<tr>';
                str +='<td>文件类型</td>';
                str +='<td>';
                str +='<select class="form-control" id="notification" name="notification"  style="width: 200px;float: left">';
                str +='<option value="0">1 Vendor Configuration File</option>';
                str +='<option value="1">2 Vendor Log File</option>';
                str +='</select>';
                str +='<span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>url</td>';
                str +='<td><input type="text" class="form-control" style="width: 200px;float: left" id="field-1" placeholder=""><span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font><font color="#5f9ea0">1~256个字符</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>用户名</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""  style="width: 200px;float: left"></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>密码</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""  style="width: 200px;float: left"></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>延迟时间</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""  style="width: 200px;float: left"><span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font><font color="#5f9ea0">1~8个字符</font></span></td>';
                str +='</tr>';
                str +='</tbody></table>';
                str +='<div class="form-group" style="margin:5px 0 0 400px">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div> </form>';
            }else if(i==11){
                str +='<form role="form" class="form-horizontal" style="margin-top:15px;">';
                str +='<table class="tables2" ><tbody>';
                str +='<tr>';
                str +='<td>文件类型</td>';
                str +='<td>';
                str +='<select class="form-control" id="notification" name="notification"  style="width: 300px;float: left">';
                str +='<option value="0">------请选择一种文件类型------</option>';
                str +='<option value="1">Firmware_Upgrade_Image</option>';
                str +='<option value="1">Web_Content</option>';
                str +='<option value="2">Vendor_Configuration_File</option>';
                str +='</select>';
                str +='<span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>url</td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;float: left" id="field-1" placeholder=""><span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font><font color="#5f9ea0">1~256个字符</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>用户名</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""  style="width: 300px;float: left"></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>密码</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""  style="width: 300px;float: left"></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>文件大小（以字节为单位）</td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;float: left" id="field-1" placeholder=""><span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font><font color="#5f9ea0">1~32个字符</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>文件名称</td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;float: left" id="field-1" placeholder=""><span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font><font color="#5f9ea0">1~256个字符</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>安装方式</td>';
                str +='<td>';
                str +='<select class="form-control" id="anzhuang" name="anzhuang" style="width: 300px;float: left" >';
                str +='<option value="0">---请选择---</option>';
                str +='<option value="1">非静默</option>';
                str +='<option value="2">静默</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>'
                str +='<tr>';
                str +='<td>是否强制升级</td>';
                str +='<td>';
                str +='<select class="form-control" id="qianzhi" name="qianzhi" style="width: 300px;float: left" >';
                str +='<option value="0">非强制</option>';
                str +='<option value="1">强制</option>';
                str +='</select>';
                str +='</td>';
                str +='</tr>'
                str +='<tr>';
                str +='<td>延迟时间</td>';
                str +='<td><input type="text" class="form-control" id="field-1" placeholder=""  style="width: 300px;float: left"><span style="float: left;margin:5px 0 0 5px;"><font color="#a52a2a">*</font><font color="#5f9ea0">1~8个字符</font></span></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>successUrl</td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;float: left" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='<tr>';
                str +='<td>failureUrl</td>';
                str +='<td><input type="text" class="form-control" style="width: 300px;float: left" id="field-1" placeholder=""></td>';
                str +='</tr>';
                str +='</tbody></table>';
                str +='<div class="form-group" style="margin:5px 0 0 400px">';
                str +='<input type="submit" class="btn btn-default form-search" style="background-color: #428bca;color: #fffefe;">';
                str +='</div> </form>';
            } else{
                str +='<button class="btn btn-info btn-icon" type="submit">刷新</button>';
            }
            $('#showtable').html(str);
        })
    })
页面更新会丢失事件绑定，要绑定到document中
中间那改为

$(document).on('click', '.trclicks', function(){
    var ischeck = this.checked;
    $.each($(".trclick"),function(i,item){
        item.checked=ischeck;
    });
});




                

        

    


  



    



                



	

		

			

				
					
jQuery如何获取动态添加的元素

				
			

			

				

					01-19
				

			

		

		

			
				
　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。  二、解决方法  　度娘推荐的方法基本是用live()方法  　live()的官方定义和用法:  　live() 方法为...

			
		

	



                

            
              



	

		

			

				
					
jquery 添加插入元素技巧<前面和后面>

				
			

			

				

					weixin_34409822的博客
				

				

					05-31
					
					312
					
				

			

		

		

			
				
jquery 添加插入元素技巧<前面和后面>

jquery添加插入元素技巧：
jquery添加分为在指定元素的里面添加和外面添加两种：
里面添加使用（append 和prepend）
里面添加又分为在里面的前面添加和后面添加
里面的前面添加使用
append 或appendTo
里面的后面添加使用
prepend和prependTo

外面添加使用（aft...

			
		

	



              


  
              

                


	

		

			

				
					
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

					
热门推荐

				
			

			

				

					幸福滴嘴角上扬的博客
				

				

					09-07
					
					17万+
					
				

			

		

		

			
				
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt;
		&lt;link rel="stylesheet" h

			
		

	





	

		

			

				
					
jq中append()、prepend()、after()、before()的区别详解

				
			

			

				

					空白_回忆的博客
				

				

					01-07
					
					2万+
					
				

			

		

		

			
				
1、append() - 在被选元素的结尾插入内容（内容的结尾，比如说有个a标签，则是在这个标签之前添加东西）2、prepend() - 在被选元素的开头插入内容（内容的开始，比如说有个a标签，则是在这个标签之后添加东西）3、after() - 在被选元素之后插入内容（元素的结尾，比如说有个a标签，则是在这个标签之后添加东西）4、before() - 在被选元素之前插入内容（内容的开始，比如说有个a

			
		

	



		

			
		



	

		

			

				
					
JQ 添加元素

				
			

			

				

					weixin_55032665的博客
				

				

					12-08
					
					927
					
				

			

		

		

			
				
1.append() : 在被选元素的结尾插入内容

例：

一个简单的布局（无序列表）

代码：



结果：



2. prepend () : 在被选元素的之前插入内容

依然是前面那个无序列表



结果：



3. after () :在被选元素之后插入内容。

代码：

结果：



3. before () :在被选元素之前插入内容

代码：

结果：

after() 和 before() 方法能够通过参数接收无限数量的新元素。

可以通过 text/HTML、jQuery 或者 J..

			
		

	





	

		

			

				
					
JQ添加元素

				
			

			

				

					weixin_57746257的博客
				

				

					07-19
					
					690
					
				

			

		

		

			
				
一、第一部分（HTML的部分）





第二部分（JQ添加元素的部分）

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容







第三部分（效果没有展示的部分）





第四部分（效果展示后的部分）





这是我所学到的jQuery添加元素的方法，想分享给你们，希望可以帮助到你们。以上就是我的分享，如有更好的方法，欢迎大家推荐！写错的地方，欢迎...

			
		

	





	

		

			

				
					
jquery动态添加元素事件失效问题解决方法

				
			

			

				

					10-25
				

			

		

		

			
				
总之，jQuery的`on()`方法是解决动态添加元素事件失效的关键，它通过在静态父元素上监听事件并转发给动态子元素，实现了对动态内容的事件处理。合理使用`on()`方法，能够帮助我们创建更加动态、响应式的Web应用。

			
		

	





	

		

			

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

				
			

			

				

					10-21
				

			

		

		

			
				
8. 总结：通过使用jQuery的事件委托技术，开发者可以有效地为动态生成的元素添加事件处理器。这种方式不仅节省了资源，还提高了代码的效率和可维护性。在实际开发中，这种方法被广泛应用于各种需要动态内容更新的...

			
		

	





	

		

			

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

				
			

			

				

					10-22
				

			

		

		

			
				
这些元素可能是通过JavaScript动态创建并插入到DOM中的。jQuery为我们提供了一种非常方便的方法来为这些动态元素绑定事件。接下来，我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。  首先，需要了解的...

			
		

	





	

		

			

				
					
jQuery动态添加元素无法触发绑定事件的解决方法分析

				
			

			

				

					10-18
				

			

		

		

			
				
当动态创建元素时，这些新元素并没有在页面加载时存在，因此它们不会接收到当初为页面初始元素绑定的事件处理程序。  本文主要讨论了两种解决jQuery动态添加元素无法触发绑定事件的方法：  1. 使用`live`方法（已...

			
		

	





	

		

			

				
					
jQuery添加元素

				
			

			

				

					weixin_57762662的博客
				

				

					06-19
					
					3503
					
				

			

		

		

			
				
jQuery添加元素

			
		

	





	

		

			

				
					
Jquery添加元素

				
			

			

				

					二哈
				

				

					01-16
					
					281
					
				

			

		

		

			
				
1. 有的时候需要为某些元素添加元素

主要有以下几个方法：

append() - 在被选元素的结尾插入内容
	prepend() - 在被选元素的开头插入内容
	after() - 在被选元素之后插入内容
	before() - 在被选元素之前插入内容
2. 下面是具体的例子：


&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;m...

			
		

	





	

		

			

				
					
jQuery插入新元素

				
			

			

				

					threelifeadv的博客
				

				

					02-28
					
					2492
					
				

			

		

		

			
				
JQuery作为javascript的函数库，提供了很多方便的操作元素的方法，本章内容主要讲述如何使用jQuery向HTMl页面中追加新元素。通过jQuery，可以很容易的向页面中添加新元素或内容，使用jQuery向HTML页面中追加新元素主要使用了如下几个方法：

1、append()：

$("p").append("&lt;a&gt;1&lt;/a&gt;")；

在p元素尾部追加&lt;a...

			
		

	





	

		

			

				
					
jq 创建/添加/删除元素

				
			

			

				

					weixin_42448623的博客
				

				

					06-06
					
					946
					
				

			

		

		

			
				
创建元素
var li = $("<li></li>")

添加
内部添加
$("ul").append(li)  //添加到内部的底部
$("ul").prevend(li)  //添加到内部的顶部

外部添加
var div= $("<div>div</div>")
$("ul").after(div) //在ul的后面添加div
$("ul").before(div) //在ul的前面添加div

删除
$("ul").remove() //删除匹配的元

			
		

	





	

		

			

				
					
jQuery中添加元素的方法

				
			

			

				

					ANGWH的博客
				

				

					05-17
					
					1564
					
				

			

		

		

			
				
insertBefore()方法 和  before() 方法  都是在被选元素之前插入
insertBefore

没有使用insertBefore之前

使用之后

可以看出 insertBefore 是剪切操作
before
与insertBefore不同的是，before前面是在哪个元素前面插入，后面是插入的内容元素

效果：

与insertBefore一样，都是剪切操作。
可以直接使用字符，可以是html代码

insertAfter() 和 after() 都是在被选元素后面插入
insert

			
		

	





	

		

			

				
					
jquery追加元素的方法

				
			

			

				

					闲笔杂叙
				

				

					12-16
					
					2688
					
				

			

		

		

			
				
//操作范围元素的内部
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容//操作范围元素的外部
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容 
  以上几个元素说明  作用范围/位置
  元素外部
  元素内部
  被选元素前
  被选元素后  append()
  false
  true
  false

			
		

	





	

		

			

				
					
jquery学习笔记之动态添加元素绑定事件

				
			

			

				

					十七 意林
				

				

					03-03
					
					507
					
				

			

		

		

			
				
这两天做项目涉及到页面上的设计，用到一些jquery，记录一下学习的成果。都是一些小的零散的知识点，大神不要见笑。
1.jquery动态添加元素时需要绑定事件。demo如下：
没有绑定事件时：

 
  
	
	
		$(document).ready(function(){
			$("#addBtn").click(function(){
				//点击之后在content DIV中添加

			
		

	





	

		

			

				
					
理解jQuery：动态创建元素与事件处理

				
			

			

				

					
				

			

		

		

			
				
"该资源是一份关于jQuery的详细课件，主要讲解如何使用jQuery动态创建节点元素。通过示例代码展示了如何根据用户输入创建带有特定属性的DOM元素，并将其插入到页面中。此外，还涵盖了jQuery的基本概念，如选择器、...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值