Question

我在文档元素上绑定事件以使它们动态化。

问题是这些事件直接在元素上执行AFTER事件。

我有代码绑定要首先执行的元素，但它不适用于动态内容。以下是我将用于非动态内容的代码：

bindFirst: function (name, fn) {
        var elem, handlers, i, _len;
        this.bind(name, fn);
        for (i = 0, _len = this.length; i < _len; i++) {
            elem = this[i];
            handlers = jQuery._data(elem).events[name.split('.')[0]];
            handlers.unshift(handlers.pop());
        }
    }

此函数位于.fn.extend下。

正如我之前所说，我希望能够为文档变量绑定的动态内容做同样的事情。例如...

$(document).on("click", "div", function(){});

我希望在上面的代码之后执行此操作：

$("div").on("click", function(){});

Answer 1

喜欢@epascarello在评论中写道：

这是不可能的，你需要找出不同的东西。

必须考虑代码逻辑的解决方法。在任何情况下，我都建议你“让我说”不好的代码只是为了创造应该发生什么以便恢复事件起泡的证据。

使用.trigger()方法添加参数并使用event.stopPropagation()以避免无限循环。

如果当前元素具有click事件处理程序，则在委托事件中进行测试，从而再次触发事件。

$('#btn').on('click', function(e) {
    $(document.body).append($('<div/>', {text: 'CLICK ME: NEW DIV'}));
});

$("div").on("click", function(e, fromInner){
    // revert event bubling....
    if (fromInner == undefined) {
        return;
    }
    e.stopPropagation();
    //normal code.........
    console.log('Normal click event');
});

$(document).on("click", "div", function(e) {
  // revert event bubling....
  if ($._data(this).events != undefined && $._data(this).events[e.type] != undefined) {
      $(this).trigger('click', ['fromInner']);
  }
  console.log('Delegated Click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" id="btn">Add new DIV</button>
<div>CLICK ME</div>

Answer 2

你不能用jQuery事件委托来做这件事，它只是使用事件冒泡，它从目标元素到容器。但普通的Javascript addEventListener()方法也支持事件 capture ，这是另一个方向。可选的第三个参数可用于为事件侦听器启用捕获模式。请参阅Event Bubbling and Capturing。

所以我认为你应该能写：

document.addEventListener("click", function() {...}, true);

jQuery强制动态事件首先绑定

2 个答案: