onClick .hide（）與點擊相同的DIV

Question

我是.append()'通過jQuery處理某些HTML - 它的功能應該如此。但是，功能.detach()（功能低於// close thankyou message）不會刪除附加的HTML。沒有控制檯錯誤......並且似乎無法注意/弄清楚我做錯了什麼。

如何分離我點擊時附加的「謝謝你的留言」？當我點擊它時，沒有任何反應。

  // Thank You Confirmation 
      // Example Modal 
      var tyOverlay = 'thankyouOverlay'; 
      var thxMsg = 'thanksBox'; 

      $('.campaign-form-submit').on('click', function() { 
       $('#campaign-wrap').append(     
        '<div id="' + tyOverlay + '">' +   
         '<div class="' + thxMsg + ' shadow">' + 
          '<div class="ty-msg left">THANK YOU! YOUR ENTRY HAS BEEN RECEIVED.</div>' + 
          '<div class="ty-close left">' + 
           '<div class="ty-close-icon"></div>' + 
          '</div>' +  
         '</div>' + 
        '</div>' 
        ); 
       $('#' + tyOverlay + ', .' + thxMsg + '').hide(); 
       $('#' + tyOverlay + '').fadeIn(400, function() { 
        $('.' + thxMsg + '').slideDown(200); 
       }); 
       return false; 
      }); 
      // close thankyou message 
      $('#thankyouOverlay').on('click', function (e) { 
       e.preventDefault(); 
       $(this).detach(); 
      }); 

Answer 1

#thankyouOverlay不存在，直到被點擊.campaign-form-submit。無論是移動#thankyouOverlay點擊其它功能的內部或使用授權綁定：

$(document).on('click', '#thankyouOverlay' ... 

Answer 2

嘗試類似的措施：

 // Thank You Confirmation 
     // Example Modal 
     var tyOverlay = 'thankyouOverlay'; 
     var thxMsg = 'thanksBox'; 

     $('.campaign-form-submit').on('click', function() { 
      $('#campaign-wrap').append(     
       '<div id="' + tyOverlay + '">' +   
        '<div class="' + thxMsg + ' shadow">' + 
         '<div class="ty-msg left">THANK YOU! YOUR ENTRY HAS BEEN RECEIVED.</div>' + 
         '<div class="ty-close left">' + 
          '<div class="ty-close-icon"></div>' + 
         '</div>' +  
        '</div>' + 
       '</div>' + 
       "<script>// close thankyou message \ 
        $('#thankyouOverlay').on('click', function (e) { \ 
        e.preventDefault();\ 
        $(this).detach();\ 
       });</script>" 
       ); 
      $('#' + tyOverlay + ', .' + thxMsg + '').hide(); 
      $('#' + tyOverlay + '').fadeIn(400, function() { 
       $('.' + thxMsg + '').slideDown(200); 
      }); 
      return false; 
     }); 

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.