Knockout条件渲染后Div的Wheel事件监听失效问题求助

你遇到的问题核心是**$(document).ready只在页面初始DOM加载完成后执行一次**。当页面加载时condition为false，Knockout不会渲染包含myDiv的那部分DOM；等你切换标签页让condition变成true，Knockout才把myDiv插入DOM，但此时ready回调早就跑完了，wheel事件根本没绑定到myDiv上。而document的keyup事件是绑定在全局的document上，不管元素什么时候出现都能触发，所以不受影响。

下面是几种可行的解决方案：

方案1：事件委托（最简单直接） #

把wheel事件绑定到一个始终存在于DOM中的父元素（比如document），通过事件冒泡机制捕获myDiv上的滚轮事件。这样不管myDiv什么时候被插入DOM，事件都能被触发。

修改OtherHTMLFile里的代码：

$(document).ready(() => {
    document.addEventListener('keyup', function(event) {
        ...
    });

    // 用事件委托代替直接绑定到myDiv
    document.addEventListener('wheel', function(event) {
        // 判断事件触发源是否是myDiv或其子元素
        if (event.target.id === 'my-div' || event.target.closest('#my-div')) {
            // 这里写原来要执行的代码
            <content here to be executed>
        }
    });
});

如果页面中有多个类似元素（建议用class代替id），可以把判断条件换成event.target.closest('.my-div')。

方案2：利用Knockout的afterRender回调 #

在Knockout的条件渲染块里添加afterRender绑定，当元素渲染完成后执行事件绑定逻辑。这样每次Knockout把myDiv插入DOM时，都会重新绑定事件。

修改Razor页面的代码：

<!-- ko with: key -->
    <div class="..." style="display: none;" data-bind="visible: condition, if: condition, afterRender: bindWheelEvent">
        ...
        @Html.Partial("OtherHTMLFile")
        ...
    </div>
<!-- /ko -->

然后在你的Knockout ViewModel里添加bindWheelEvent方法：

function YourViewModel() {
    var self = this;
    self.key = ...; // 你的key对象
    self.condition = ko.observable(false); // 你的condition observable

    self.bindWheelEvent = function(elements) {
        var myDiv = document.getElementById('my-div');
        if (myDiv) {
            // 先移除旧事件，避免重复绑定
            myDiv.removeEventListener('wheel', self.wheelHandler);
            self.wheelHandler = function(event) {
                // 这里写要执行的代码
                <content here to be executed>
            };
            myDiv.addEventListener('wheel', self.wheelHandler);
        }
    };
}

方案3：自定义Knockout绑定（最优雅，适合复用） #

把滚轮事件绑定封装成一个Knockout自定义绑定，以后任何元素需要绑定滚轮事件都可以直接用这个绑定，还能自动处理元素销毁时的事件清理。

首先定义自定义绑定：

ko.bindingHandlers.wheel = {
    init: function(element, valueAccessor) {
        var handler = valueAccessor();
        element.addEventListener('wheel', handler);

        // 元素销毁时自动移除事件，避免内存泄漏
        return {
            dispose: function() {
                element.removeEventListener('wheel', handler);
            }
        };
    }
};

然后在OtherHTMLFile里直接给myDiv用这个绑定：

<div id="my-div" data-bind="wheel: wheelHandler">
    ...
</div>

最后在ViewModel里定义处理方法：

function YourViewModel() {
    var self = this;
    self.wheelHandler = function(event) {
        // 这里写要执行的代码
        <content here to be executed>
    };
}

内容的提问来源于stack exchange，提问作者Kevin L.