자바 스크립트에서 '닫기'버튼이 작동하지 않습니다.

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