$(document).on(); 方法

$(document).on('click','要选择的元素',function(){});

用于动态事件的绑定:

        var sysfoot = '<p class="verifi-box text-danger error-box mib-error"></p>';
        sysfoot += '<button type="button" class="btn btn-primary addMibSub">确定</button>';
        sysfoot += '<button type="button" class="btn btn-danger addMibRest">重置</button>';

这种情况下的动态确定按钮,就只能使用on来进行触发,其他的都会无效

        $(document).on("click","#mibModal .addMibSub",function () {
            subMibSave();
        });

这样就可以触发了。


下面一段话是看到的一些总结:(该部分转自 https://www.cnblogs.com/sqh17/p/7746418.html)

1.从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。
    $().bind()直接绑定在元素上,和click,blur,mouseon一样的点击事件。

    $().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。

    $().delegate()是更精确的小范围的使用事件代理。

             $().on()结合了这三个方法的优势摒弃了劣势。

2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
3. 阻止事件冒泡和事件委托的方法:
    A:return false。 
      在事件的处理中,可以阻止默认事件和冒泡事件。

    B:event.preventDefault()
      在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。

    C:event.stopPropagation().。
      在事件的处理中,可以阻止冒泡但是允许默认事件的发生。


<think>嗯,用户提供的这段jQuery代码目的是在点击弹层外部时关闭它,但实际无效。我需要分析可能的原因。 首先,代码结构。他们使用$(document).on('click', 'div:not(.overflow-auto)', function() { $popup.remove(); });。这里可能的问题在于事件冒泡。当点击内部的div时,事件会冒泡到document,导致即使点击内部也会触发关闭。比如,如果弹层内部有div元素且没有.overflow-auto类,点击这些区域也会触发关闭,这可能不是用户想要的。 其次,选择器的问题。'div:not(.overflow-auto)'可能匹配到多个div元素,包括弹层外部的,导致点击页面其他部分时关闭弹层,但可能因为事件处理的范围问题没有正确判断是否是弹层外部。 另外,$popup变量的引用是否正确?如果$popup未正确定义或作用域问题,可能导致remove()方法无法执行。 还需要考虑事件阻止。可能在弹层内部的元素有stopPropagation(),阻止了事件冒泡到document,导致外部点击无法触发处理函数。 可能的解决方案包括:检查$popup是否正确引用;调整选择器,确保只在点击弹层外部时触发;使用事件对象的target来判断点击区域;或者给弹层添加一个透明的遮罩层,点击遮罩层时关闭。 比如,可以修改事件处理函数,判断点击的目标是否在弹层外部,或者弹层是否包含目标元素。还可以使用stopPropagation()阻止弹层内部点击事件冒泡到document,这样外部点击才会触发关闭。 此外,动态生成的元素可能需要正确的事件委托绑定,但这里用的是document,应该没问题。但选择器可能需要更精确,比如判断点击目标是否是弹层本身或其子元素,如果不是则关闭。 可能用户需要的是点击弹层外部关闭,而内部不关闭。这时候应该在事件处理中检查事件目标是否在弹层外部,如果是则移除弹层。例如: $(document).on('click', function(e) { if (!$popup.is(e.target) && $popup.has(e.target).length === 0) { $popup.remove(); } }); 这样,只有当点击的目标不是弹层本身且不在弹层内部时,才会执行关闭操作。同时,确保弹层外部的元素不会阻止事件冒泡。 另外,检查是否有其他事件处理函数干扰,比如阻止了document的点击事件。或者CSS问题,比如弹层外部的元素无法被点击(例如层级z-index问题)。 总结可能的问题点:事件冒泡处理不当、选择器过于宽泛、$popup变量未正确引用、弹层内部元素阻止事件冒泡、CSS层级问题等。需要逐一排查这些可能性。</think> jQuery 代码的目的是希望通过点击弹层外部区域关闭弹窗,但实际未能生效。以下是可能的原因和解决方案分析: --- ### 🔍 **问题分析** 1. **事件冒泡问题** ```javascript // 当前代码会监听所有 div 元素(除了带 .overflow-auto 的)的点击事件 $(document).on('click', 'div:not(.overflow-auto)', function () { $popup.remove(); }); ``` - 如果弹层内部存在 `div` 元素且没有 `.overflow-auto` 类,点击弹层内部也会触发关闭。 - 事件冒泡导致逻辑误判:点击任何符合条件的 `div`(包括页面其他区域)都会触发关闭。 2. **选择器过于宽泛** - `div:not(.overflow-auto)` 会匹配页面中所有不包含 `.overflow-auto` 的 `div`,包括与弹层无关的区域。 3. **变量作用域问题** - `$popup` 可能未正确定义或作用域错误,导致 `$popup.remove()` 无法执行。 4. **事件阻止传播** - 弹层内部可能有 `e.stopPropagation()` 阻止了事件冒泡到 `document`。 --- ### ✅ **解决方案** #### 方案 1:精准判断点击区域 ```javascript $(document).on('click', function (e) { // 如果点击的是弹层外部区域,则关闭 if (!$popup.is(e.target) && $popup.has(e.target).length === 0) { $popup.remove(); } }); ``` - **逻辑说明**:直接监听 `document` 的点击事件,通过 `e.target` 判断点击目标是否在弹层外部。 - **优势**:精准控制点击区域,避免事件冒泡干扰。 #### 方案 2:添加遮罩层 ```html <!-- 弹层结构 --> <div class="mask"> <!-- 半透明遮罩 --> <div class="popup">弹层内容</div> </div> ``` ```javascript // 点击遮罩层关闭弹层 $('.mask').on('click', function () { $(this).remove(); }); ``` - **优势**:通过遮罩层限定点击区域,逻辑更清晰。 #### 方案 3:阻止弹层内部事件冒泡 ```javascript // 弹层内部区域阻止点击事件冒泡 $popup.on('click', function (e) { e.stopPropagation(); }); ``` - **逻辑说明**:阻止弹层内部的点击事件冒泡到 `document`,确保只有点击外部才会触发关闭。 --- ### ⚠️ **其他注意事项** 1. **确保 `$popup` 正确定义** ```javascript // 例如在弹层打开时定义变量 const $popup = $('.popup-container'); ``` 2. **检查 CSS 层级问题** - 确保弹层和遮罩层的 `z-index` 足够高,避免被其他元素遮挡导致无法点击。 3. **动态生成的元素** - 如果弹层是动态插入的,确保事件绑定在弹层渲染之后执行。 -- ### 📝 **最终推荐代码** ```javascript // 打开弹层时绑定事件 function openPopup() { const $popup = $('#popup'); // 确保选择器正确 $popup.show(); // 点击外部关闭 $(document).on('click.closePopup', function (e) { if (!$popup.is(e.target) && $popup.has(e.target).length === 0) {
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值