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

cancel button in modal popup not working

本文关键字：取消 按钮 不起作用 窗口 模式      更新时间：2023-09-26

我有一个视图，它获得一个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'），我在网上找到了这个脚本，有必要吗？

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

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

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

当模式"淡入"时，后台的东西似乎被暂时禁用，所以当按钮被点击时（或者后台主视图上的任何脚本都没有被触发），不会调用点击事件

相关文章：