JavaScriptで「閉じる」ボタンが機能しない

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); 
});