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>

我在部分中有取消按钮的原因是为了造型目的，当按钮在主视图中时，由于某种原因它可以正常工作。我感到困惑，因为当检索到部分时，它最终会出现在同一页面上

修改

不确定为什么theres .appendTo（＆＃39; body＆＃39;），我把这个脚本放在网上的某个地方，是否有必要？

Answer 1

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

Answer 2

我最终在部分视图上添加了按钮

的脚本

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

似乎当模式逐渐消失时，＆＃39;暂时禁用后台的内容，因此单击按钮时（或未触发背景主视图上的任何脚本）不会调用click事件。

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

2 个答案: