$(document).ready() 更新视图组件后未触发

Question

我正在将我的部分视图移动到视图组件，因为根据 Microsoft 的组件明显优于部分视图，尤其是在处理复杂视图时..

对于我现在移植到视图组件的部分视图，我有很多 jQuery 脚本。通常我在 $(document).ready() 函数中调用我的 jQuery 组件，如下所示：

$(document).ready(function(){
    Component1.init();
    Component2.init();
    ....
})

这个逻辑非常有用，因为这些视图必须多次更新。因此，当有部分视图时，组件会重新初始化，因为当部分视图文档在更新后准备好时，$(document).ready() 函数总是会触发。

但是，转到查看组件时，我仍然尝试这样做。不幸的是，我意识到$(document).ready() 仅在视图组件准备就绪时才被触发——这意味着，在更新视图组件时，$(document).ready() 函数不会被触发，因此不会初始化 jQuery 组件。我正在使用标准的 Ajax 调用来定位返回视图组件的控制器 - 一切正常，除了 $(document).ready() 函数在更新后没有被触发。

注意

一种解决方法是在 ajax 成功响应中初始化我的组件。这可行，但不是可取的。

• 这是怎么回事？
• 为什么我的$(document).ready() 函数在更新视图组件后没有触发？
• 如何正确解决这个问题，以便在视图组件准备好后初始化我的所有 jQuery 组件？

示例：

//view with component
<div id="Component">
    <vc:mycomponent lead="Model.Lead"></vc:mycomponent>
</div>

//Script Inside component
<script>
    $(document).ready(function () {
        Component.init();
    });
    var Component = (function () {
        var $button;
        var $component

        var init = function() {
             cacheDom();
             handlers();
        }
        var cacheDom = function(){
            var $button = $('#button1')
            var $component = $('#Component')
        }
        var handlers = function () {
            $button.on('click', function() {
                handleclick();
            })
        }
        var handleClick = function(){
            $.ajax({
                url: 'Controller/ViewComponent',
                type: 'GET',
                success: function (response) {
                    $component.html(response);
                }
            });
        }
        return {init : init}
    })

</script>

Answer 1

我会给你回答你只经历过第二种情况的两种情况：

问题：在 AJAX 调用后替换 HTML 后，事件处理程序（例如按钮点击）不再起作用：
解决方案：

替换

$( ".myClass" ).click(function() {
  // ...
});

与

$('body').on('click', '.myClass', function () {
    // ..
});

问题：如何从ViewComponent 插入JavaScript？ （这就是你最初提到的问题）
解决方案：这与ViewComponent的渲染时间和其他脚本（如jQuery）加载的顺序有关。

这是一个完美的答案：Javascript in a View Component
您可以创建一个标签助手，在 jQuery 加载后延迟 JavaScript 的执行。

几天前，我在这个确切的位置插入了在客户端 Ajax 调用后再次呈现 ViewComponent 后调用的 JavaScript。

<script type="text/javascript" on-content-loaded="true">
    console.log('this is being executed after loading the view component');
</script>

Answer 2

这些脚本的运行方式有所不同。当您在初始视图上执行此操作时，

<div id="Component">
    <vc:mycomponent lead="Model.Lead"></vc:mycomponent>
</div>

<script>
    $(document).ready(function () {
        Component.init();
    });
    var Component = (function () {
        var $button;
        var $component

        /* ... your code ... */

        return {init : init}
    })
<script>

在整个页面加载时触发$(document).ready(function () { ... });。

当您通过 AJAX 调用重新加载此内容时，即使 $(document).ready(function () { ... }); 仍然存在，它也永远不会被触发 - 它只会在最初构造 DOM 时触发。请参阅https://learn.jquery.com/using-jquery-core/document-ready/ 和this Stack Overflow answer，其中还包括一个简单的解决方法。对于您的代码，我想它会像添加一样简单

Component.init();

在 AJAX 代码的完成/完成处理程序中的某个位置。

如果它之前工作过...似乎不应该有，除非您的 AJAX 调用返回的是完整页面而不是部分视图（假设 load 事件可以在您丢弃任何内容之前运行你没有注入页面）。