Question

在我的表单上的移动版本中显示“关闭”按钮。不幸的是，它不起作用。我看到一个普通按钮，但是当我点击时没有反应。在javascript中，我加载了form-with-button.html文件，以在我的所有.html文件中呈现表单内容。

<div id="form-with-button">
</div>

并使用javascript显示和关闭。

//Onload show header and footer content
 $("#header").load('header.html', function(){
    $('#nav').affix({
            offset: {top: $('#header').height()-$('#nav').height()}
    });
    });
$("#footer").load('footer.html');

$("#contact").load('footer-contact.html');  
$("#form-with-button").load('form-with-button.html');

// Sticky Buttons Show Hide 
$("#fix-quote, #fix-contact").on("click", function() {
    var body = $("body");
    var openPos= ["",""];
    var id = $(this).attr("id");
    var content = $("#"+id+"-content");
    var property = (content.attr("class").toString().indexOf("left") > -1)? "left": "right";
    if (!body.hasClass("bd_"+id)) {
        openPos= [0,380]
        var ele = $(this);
        body.addClass("bd_"+id)
        setTimeout(function(){
            body.on("click.fix",function(ev) {
                if($(ev.target).closest(".fixed-container").length == 0){
                    $(ele).click()
                }
            });
        },10);
    } else {
        body.removeClass("bd_"+id).off("click.fix");
    }

    content.css("top","").show().css(property, openPos[0]);
    $(this).css(property, openPos[1]);

});
// Mobile Requests Showhide 
$("#fix-quote-mob, #fix-contact-mob").on("click", function() {
    var id = $(this).attr("id").slice(0,-4);
    var content = $("#"+id+"-content");
    content.show()
    setTimeout(function(){
       content.css("top",0) 
    },10)
});
$(".fix-contact-close").on("click", function() {
    var content = $(this).closest(".fixed-container");
    content.css("top","").delay(400).hide(0);

});

请帮忙，为什么我的按钮不起作用？

Answer 1

您正在尝试向以动态方式创建的元素添加处理程序，因此您需要重构代码才能使其正常工作：

 $(document).on("click", ".fix-contact-close", function() {
     var content = $(this).closest(".fixed-container");
     content.css("top","").delay(400).hide(0);
 });

“关闭”按钮在javascript中不起作用

1 个答案: