jquery 关于使用 append 追加 元素后 事件无法触发

本文探讨了在使用JavaScript或jQuery动态创建元素并绑定事件时遇到的问题。详细解释了为什么在页面加载后添加的元素上直接绑定的事件可能不会触发,并提供了有效的解决方案,包括使用on()方法在父级元素上绑定委托事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当在使用js或jQuery创建元素时,用 on(事件,function(){代码}) 或者 事件(function(){代码 })绑定事件时

在使用append添加元素后 由于是在页面加载完成之后进行的元素添加,所以事件不会触发(个人理解,不对勿喷)

 

这时我们需要给元素绑定事件

  解决方案1: on绑定

    $("父级元素").on("事件","当前元素",function(){

      巴拉巴拉......... 

    })

   如果 父级元素 还不行 就用 $(document).on("事件","当前元素",function(){})       $('body') .on("事件","当前元素",function(){}) 

  例子:

 

  $("#box").on("click",".div-img",function(){

  thisdom = this;

  var isclil = this.children;

  if(isclil.length==0)

  {

  ifile.click(function(){

 

      });

    }

  })

### 使用 `append` 方法动态插入时间段元素jQuery 中,可以使用 `.append()` 方法向指定的选择器内部追加 HTML 元素。以下是基于提供的引用内容以及实际需求的一个完整示例。 #### 示例代码 以下是一个完整的例子,展示如何通过 `append` 方法动态创建并插入包含时间段的 HTML 元素: ```javascript $(document).ready(function() { // 定义一个函数用于生成时间段HTML结构 function createTimeSegment(start, end) { return ` <div class="time-segment"> <span>开始时间: ${start}</span> <span>结束时间: ${end}</span> </div> `; } // 假设有一个按钮点击事件触发新增时间段逻辑 $('#addTime').on('click', function() { const startTime = '09:00'; // 可替换为动态获取的时间 const endTime = '17:00'; // 可替换为动态获取的时间 // 创建新的时间段HTML并通过append方法插入到容器中 $('.container').append(createTimeSegment(startTime, endTime)); }); }); ``` #### 解析 上述代码实现了以下几个功能: - **定义时间段模板**:通过 `createTimeSegment` 函数构建了一个简单的 HTML 结构,表示一个时间段[^1]。 - **动态生成数据**:假设每次点击按钮时会传入不同的起始时间和结束时间[^2]。 - **追加到 DOM**:`.append()` 将新生成的时间段 HTML 插入到页面中的某个容器(如 `.container`)内[^4]。 如果需要更复杂的功能,比如支持拖拽调整时间段或者删除已有的时间段,则可以在基础之上进一步扩展逻辑。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值