jQuery：點擊事件中的點擊事件

Question

我有一個div。 這個div中有一個按鈕清空div並用新內容填充它。

問題就出在這裏，當DIV充滿了新的內容，我不能呼籲任何填補這個div元素的點擊（）函數。我究竟做錯了什麼？

的代碼一路底部的塊是有問題的一個。

$(document).ready(function(){ 
     function newGame(){ 
      //Empty the game window of contents. 
      $('#previewWindow').empty(); 

      //Add the following HTML to the game window. 
      $('#previewWindow').append("<div id='spriteBox' align='center'><img id='sprite1' src='images/sprites/172(noSelect).png' border='0'/><img id='sprite2' src='images/sprites/88(noSelect).png' border='0' /><img id='sprite3' src='images/sprites/196(noSelect).png' border='0' /><div id='info' align='center'>TEST</div></div>"); 

      //Hover effects for Sid's character. 
      $('#sprite1').hover(function(){$(this).attr('src', 'images/sprites/172.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/172(noSelect).png');} 
      ); 

      //Hover effects for Grim's character. 
      $('#sprite2').hover(function(){$(this).attr('src', 'images/sprites/88.png');$('#crumbling').get(0).play();},function(){$(this).attr('src', 'images/sprites/88(noSelect).png');} 
      ); 

      //Hover effects for Falas's character. 
      $('#sprite3').hover(function(){$(this).attr('src', 'images/sprites/196.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/196(noSelect).png');} 
      ); 
     }; 

     //Execute the following code block if New Game is clicked. 
     $('#newGame').click(function(){ 
      newGame(); 
     }); 

     //Execute the following code block if Sid is clicked. 
     $('#sprite1').click(function(){ 
      alert('Hello'); 
     }); 
    }); 

Answer 1

因爲您已將點擊處理程序直接附加到div內的按鈕。

當DIV內容被重新裝載，你會得到新的按鈕，而不單擊處理。

你想在這一點上，這意味着您將附加處理程序的內容，而不是DIV使用事件委託，因此其走光的時候都不會丟失。

我假設你的內容的div是"previewWindow" 所以這裏是你怎麼做事件委派：

$('#previewWindow').on('click','#newGame',function(){ 
     newGame(); 
    }); 

    //Execute the following code block if Sid is clicked. 
    $('#previewWindow').on('click','#sprite1',function(){ 
     alert('Hello'); 
    }); 

它的基本含義是，只要你點擊裏面#previewWindow與​​任何元素，它調用新遊戲。

Answer 2

當您在之後添加數據時，您註冊了點擊事件，但點擊事件不會應用於您註冊後發生的數據。

爲了解決這個問題，你可以使用jQuery("#container").on(event, selector, handler(event))方法註冊上尚未添加的元素的事件。

$('#previewWindow').on('click', '#sprite1', function(){ 
    alert('Hello'); 
}); 

Answer 3

將您newGame()函數內$('#sprite1').click()事件：

$(document).ready(function(){ 
    function newGame(){ 
     //Empty the game window of contents. 
     $('#previewWindow').empty(); 

     //Add the following HTML to the game window. 
     $('#previewWindow').append("<div id='spriteBox' align='center'><img id='sprite1' src='images/sprites/172(noSelect).png' border='0'/><img id='sprite2' src='images/sprites/88(noSelect).png' border='0' /><img id='sprite3' src='images/sprites/196(noSelect).png' border='0' /><div id='info' align='center'>TEST</div></div>"); 

     //Execute the following code block if Sid is clicked. 
     $('#sprite1').click(function(){ 
      alert('Hello'); 
     }); 

     //Hover effects for Sid's character. 
     $('#sprite1').hover(function(){$(this).attr('src', 'images/sprites/172.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/172(noSelect).png');} 
     ); 

     //Hover effects for Grim's character. 
     $('#sprite2').hover(function(){$(this).attr('src', 'images/sprites/88.png');$('#crumbling').get(0).play();},function(){$(this).attr('src', 'images/sprites/88(noSelect).png');} 
     ); 

     //Hover effects for Falas's character. 
     $('#sprite3').hover(function(){$(this).attr('src', 'images/sprites/196.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/196(noSelect).png');} 
     ); 
    }; 

    //Execute the following code block if New Game is clicked. 
    $('#newGame').click(function(){ 
     newGame(); 
    }); 

}); 

Answer 4

另一種選擇是有

$(document).ajaxComplete(function() { 
    $('#sprite1').on('click', function() { 
     alert('Hello'); 
    }); 
});