jquery - $(document).ready() 更新 View 组件后未触发

Question

我正在将部分 View 移动到 View 组件，因为根据 Microsoft 的说法，组件明显优于部分 View ，尤其是在处理复杂 View 方面。

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

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

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

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

注意

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

• 这是怎么回事？
• 为什么我的 $(document).ready() 函数在更新 View 组件后没有触发？
• 如何正确解决这个问题，以便在 View 组件准备好后初始化所有 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 的执行。

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

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