Question

我的HTML文件中有以下内容当点击编辑按钮时，弹出一个弹出窗口，一切正常

<div class="col3 pull-left">
<a  class="btn mini black editscreenT1"  title="Edit FOR T1" data-toggle="modal"   href="#editrespon_popup" ><i class="icon-edit"></i></a>
</div>

<div id="editrespon_popup" class="modal hide fade" tabindex="-1" data-width="360" style="width:350px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h3>Edit Name</h3>
        </div>
    </div>

但是当我尝试动态执行此操作时，这不会打开PopUP并且浏览器控制台下没有错误

$(document).on("click", ".editscreenT1", function (e)
 {
var html = ' <div id="editrespon_popup" class="modal hide fade" tabindex="-1" data-width="360" style="width:350px;">\
        <div class="modal-header">\
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>\
            <h3>Edit Name</h3>\
        </div>\
    </div>';


 $(".editscreenT1").attr("href",html);

    });

为什么在编辑按钮上第一次点击时不会显示弹出窗口

从第二次点击开始，弹出窗口显示在编辑按钮

上

Answer 1

您正尝试将锚标记的href属性设置为DIV结构。

而不是将弹出式DIV附加到html主体或任何其他你想要的选择器，并将HREF属性设置为DIV到锚点的选择器。

请试一试，

$(document).on("click", ".editscreenT1", function (e){
var html = ' <div id="editrespon_popup" class="modal hide fade" tabindex="-1" data-width="360" style="width:350px;">\
        <div class="modal-header">\
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>\
            <h3>Edit Name</h3>\
        </div>\
    </div>';
$("body").append(html);

$(".editscreenT1").attr("href","#editrespon_popup");
});

为什么在首次点击时不显示弹出窗口

1 个答案: