.click在使用replaceWith後停止工作

Question

好吧，我一直卡在這一小會兒現在...

基本上我有兩種方法我想要顯示某個div。我打算用replaceWith（）替換#mainDiv和另一個版本的#mainDiv來創建一個函數。

下面是函數：

function switchToChoice(){ 
      $('#myCanvas2').replaceWith('<div id="yesBox" width="150" height="90"><img id="yes" src="Yes-Button.png" width="110" height="55"></div><div id="noBox" width="150" height="90"><img id="no" class src="No-Button.png" width="110" height="55"></div>'); 

     } 

這工作，並創建格框我想，當它被調用。 div盒中有兩個圖像，可點擊，但不執行點擊操作。

這是不是replaceWith工作後的一段代碼：

//If the user presses the Next button on the comment pages. 
     $('#next').click(function() { 
      $('#next').fadeTo(100, 0.25, function(){ 
       clearCanvas(ctx, c); 
       wrapText(ctx, questionList[textPos], x, y-20, 275, 15); 
       textPos++; 
      }); 
      switchToChoice(); 
      $('#next').fadeTo(100, 1); 
     }); 

     //If the user presses the Yes button on the question pages. 
     $('#yes').click(function() { 
      alert("boobs"); 
      $('#yes').fadeTo(100, 0.25, function(){ 
       clearCanvas(ctx, c); 
       wrapText(ctx, questionList[textPos], x, y-20, 275, 15); 
       textPos++; 
      }); 
      $('#yes').fadeTo(100, 1); 
     }); 

     //If the user presses the No button on the question pages. 
     $('#no').click(function() { 
      $('#no').fadeTo(100, 0.25, function(){ 
       clearCanvas(ctx, c); 
       wrapText(ctx, questionList[textPos], x, y-20, 275, 15); 
       textPos++; 
      }); 
      $('#no').fadeTo(100, 1); 
     }); 

我的猜測是，HTML被替換時，有些東西失去了，但我真的不知道是什麼。我對JQuery相當陌生，並且儘可能地做了大量的研究，但似乎我只是圍繞着圈子。誰能幫忙？

Answer 1

你是對的，當你替換html時，事件正在被破壞。

當我看着你要替換它的時候，沒有任何帶有#next事件的元素。你有yesBox的ID，yes，noBox和no，但是沒有。這意味着你不會點擊符合標準的任何內容。

編輯

由於您試圖訪問不存在，直到更換了HTML的#yes和#NO箱，事件不能的方式綁定到這些你」重新嘗試。

相反，嘗試這樣的事：

$('#myCanvas').on('click', '#yes', function(){}) 

這實際上綁定事件到myCanvas DIV，但只會觸發具有的yes一個id子元素（的對函數的第二個參數。 ）

這種方式事件綁定到div，它甚至在您替換HTML之後仍然保留。

Answer 2

您正在動態創建元素，您需要使用使用on的事件委託。

您的活動將僅附加到當時DOM中存在的元素。因此，您需要通過將事件附加到文檔或任何時間點存在的父元素來使用Delegated事件。你可以通過使用on()

 $(document).on('click', '#next', function() { 
     $(this).fadeTo(100, 0.25, function(){ 
      clearCanvas(ctx, c); 
      wrapText(ctx, questionList[textPos], x, y-20, 275, 15); 
      textPos++; 
     }); 
     switchToChoice(); 
     $(this).fadeTo(100, 1); 
    }); 

    //If the user presses the Yes button on the question pages. 
    $(document).on('click','#yes', function() { 
     alert("boobs"); 
     $(this).fadeTo(100, 0.25, function(){ 
      clearCanvas(ctx, c); 
      wrapText(ctx, questionList[textPos], x, y-20, 275, 15); 
      textPos++; 
     }); 
     $(this).fadeTo(100, 1); 
    }); 

    //If the user presses the No button on the question pages. 
    $(document).on('click','#no', function() { 
     $(this).fadeTo(100, 0.25, function(){ 
      clearCanvas(ctx, c); 
      wrapText(ctx, questionList[textPos], x, y-20, 275, 15); 
      textPos++; 
     }); 
     $(this).fadeTo(100, 1); 
    });