Question

我创建了自定义模式窗口，其中我显示图像，该图像包含注释和所有者名称。当我点击一些图像模态打开并显示大图像，作者姓名，评论等...问题是当我关闭当前模态并再次打开它名称不存在。但是第一次当我打开模态名称时，只有当我关闭该窗口并再次打开它时，名称不存在。检查截图。我尝试使用firebook控制台调试它，GET响应返回实名，但关闭和打开后不会呈现该名称。

要prview图像我使用此代码：

   preview: function() {
        $('body').on('click', '#open-picture-modal', function (e) {
            e.preventDefault();

            $("#photo_preview").show();
            var $this = $(this);
            var guid = $this.data('guid');
            var photo_id = $this.data('id');

            $.ajax({
                method: 'post',
                dataType: 'json',
                url: baseurl + '/photo/preview',
                data: {'photo_id': photo_id},
                success: function(data) {
                    Photo.photo_author_meta(photo_id);
                    $(".pleft").html('<img class="fileUnitSpacer" src="'+ $this.data('href')+data['photo_name']+'">');
                }
            });

            //window.history.pushState(null, null, pic_url);

          //  $(".image-source").attr("src", $this.data('href'));
        });
    },

    // Close image preview modal
    close: function() {
        $("body").on("click", ".close", function(e) {
            e.preventDefault();
            $('#photo_preview').hide();
            $('#photo_preview .pleft').html('empty');
            $('#photo_preview .pright').html('empty');
        });
    },

    // Show photo author meta(name, date created, etc..)
    photo_author_meta: function(pid){
        $.ajax({
            method: "post",
            dataType: 'json',
            url: baseurl + '/photo/photo_details',
            data: {'post_id': pid},
            success: function(data) {
                $("h4.photo-author-full-name").html(data['account_firstname'] +'&nbsp;'+ data['account_lastname']);
            }
        });
    },

这里是模态，我追加并设置html

<div id="photo_preview" style="display:none">
    <div class="photo_wrp">
        <span class="pull-right close fa fa-times"> </span>
        <div style="clear:both"></div>
        <div class="pleft"></div>
        <div class="pright">
            <div class="photo-author-meta">
                <div class="media">
                    <a href="#" class="media-left">
                        <img alt="64x64" data-src="holder.js/64x64" class="media-object" style="width: 64px; height: 64px;" src="test.png" data-holder-rendered="true">
                    </a>
                    <div class="media-body photo-author-name-box">
                        <div class="photo-author-name">
                            <h4 class="media-heading photo-author-full-name"></h4>
                        </div>
                        <div class="photo-datetime-box">
                            <div class="photo-date-posted"> Objavljeno: </div>
                        </div>
                    </div>
                </div>
            </div>        </div>
        <div style="clear:both"></div>
    </div>
</div>

就像你在第一张图片上看到的那样，我在模态中有名字和姓氏。在第二张图片上，我再次打开一些模态，但名称和姓氏不存在。但请检查firebug控制台，数据是否存在但未呈现。

Answer 1

您的close方法是删除呈现元数据的HTML。

$('#photo_preview .pright').html('empty');

该行正在清空中的所有HTML。因此，当关闭后的后续时间调用photo_author_meta（）时， h4.photo-author-full-name 不再存在。

Answer 2

你有各种各样的东西：

1 - 你正在搞乱.html（）和.empty（）：

$('#photo_preview .pleft').html(); // or .empty()

2 - 删除#photo_preview .pright中的所有内容时，执行以下操作：

$("h4.photo-author-full-name").html(data['account_firstname'] +'&nbsp;'+ data['account_lastname']);

这个元素不存在。您可以创建它，或者不清空所有div内容。

你可以改变这个：

$('#photo_preview .pright').html(); // or .empty()

到

$('h4.photo-author-full-name').html(); // or .empty()

为了不删除元素，只删除其中的内容。

jQuery模式在关闭和打开后不显示名称

2 个答案: