模式弹出窗口中的“取消”按钮不起作用

Question

我有一个获取ajax部分视图并将其显示为模式弹出窗口的视图。 问题是，局部视图上具有具有特定id属性的取消按钮，但是其.click javascript事件已附加到主视图。 所以像这样：

主视图

<div>
 some_ajax_link
</div>

<div id="partial_container"></div>

<script>
  $(document).ready(function () {
        $('ajax_link').click(function (e) {
            var hiddenSection = $('#partial_container');
            hiddenSection.fadeIn()
                // unhide section.hidden
                .css({ 'display': 'block' })
                // set to full screen
                .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
                .css({
                    top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
                    left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
                })
                // greyed out background
                .css({ 'background-color': 'rgba(0,0,0,0.5)' });
        });
});
$('#partial_container').on('click', '#close_button', function () {
    $('#partial_container').fadeOut();
});
</script>

部分的

<div> Some stuff </div>
<button id="close_button">Cancel</button>

我之所以在局部视图中使用“取消”按钮是出于样式目的，当该按钮在主视图中时，出于某种原因它可以正常工作。 我很困惑，因为当检索部分时，它最终出现在同一页面上

编辑

不知道为什么会有.appendTo（'body'），我将此脚本在线放置在某处，是否有必要？

Answer 1

 $('#partial_container').on('click', '#close_button', function () { 
     $('#partial_container').fadeOut(); 
 });

Answer 2

我最终在按钮所在的局部视图上添加了脚本

$('close_button').click(function() {
 $('modal_popup_id').fadeOut();
});

看起来好像是暂时禁用了背景中的模式“淡入”事物，因此单击按钮时（或不触发背景主视图上的任何脚本）都不会调用click事件。