.click（）適用於靜態內容，但不適用於從Ajax調用插入的內容

我正在玩jQuery並製作一個簡單的筆記應用程序。現在，我從ala ajax數據庫中提取內容並將其插入到頁面中。但是，當我嘗試對動態內容（保存按鈕）上的.click（）進行簡單回調時，它不起作用。目的是將內容發回備份到數據庫進行存儲。.click（）適用於靜態內容，但不適用於從Ajax調用插入的內容

如果我採用相同的內容，我有jquery動態鞭打，只是靜態扔在Web服務器發送下來的HTML靜態，它確實工作。我不明白爲什麼一個人工作，其他人不工作。

The problematic website

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml'> 
<head> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <link rel="stylesheet" type="text/css" href="layout.css" /> 
     <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

     <!--Get notes out of database and show them--> 
     <script type="text/javascript"> 
     $(function() 
     { 
       $.ajax({ 
         url: 'noteGet.php', 
         data: "", 
         dataType: 'json', 
         success: function(rows) 
         { 
           for (var i in rows) { 
             var noteId = rows[i][0]; 
             var noteContent = rows[i][2]; 
             $('#allNotes') 
               .append('<span id="stickyNote'+noteId+'" class="stickyNote"><textarea id="stickyNoteTextArea'+noteId+'" class="stickyNoteTextArea">'+noteContent+'</textarea><a href="#" id="stickyNoteSave'+noteId+'">save</a></span>') 
           } 
         } 
       }); 


       //works 
       $('#stickyNoteSave1').click(function() { 
         alert("save button clicked"); 
       }); 

       //does not work 
       $('#stickyNoteSave13').click(function() { 
         alert("save button clicked"); 
       }); 

     }); 
     </script> 

     <!-- 
     <script type="text/javascript"> 
       $('#noteForm').submit(function(event) { 
         event.preventDefault(); 

         $.post("notePost.php", $('#noteTextArea').serialize(), function(data) { 
           alert(data); 
         }); 
       }); 

     }); 
     </script> 
     --> 

</head> 
<body> 
     <span id="allNotes"> 
       <!---The .click callback with the jquery selector works for only this span!--> 
       <span id="stickyNote1" class="stickyNote"><textarea id="stickyNoteTextArea1" class="stickyNoteTextArea">fake</textarea><a href="#" id="stickyNoteSave1">special save</a></span>') 
     </span> 

</body> 
</html>

來源

2012-04-22 overCaffeinated

當您綁定一個事件，連接事件到由您的選擇器匹配的DOM元素。如果元素還不存在，則沒有任何約束。

的解決方案是使用一個代表：

$('#container').on('click', '.elementselector', function() { 

})

#container應該是包含新插入的元件的元件（可以是document，但更具體的事情是更好）和.elementselector應匹配元素的選擇器你實際上想要的事件，例如#stickyNoteSave13

來源

2012-04-22 19:12:24 ThiefMaster

使用live：

$('#stickyNoteSave13').live('click',function() { 
     alert("save button clicked"); 
    });

來源

2012-04-22 19:10:48 mgraph

使用delegate，live或on代替click：

// live 
$('#stickyNoteSave13').live('click',function(){/*...*/});

或

// on 
$('#stickyNoteSave13').on('click',function(){/*...*/});

或

// delegate 
$('sticky-notes-container-selector').delegate('#stickyNoteSave13','click',function(){/*...*/});

我看你使用jQuery 1.7+所以我建議使用 '上' 這樣的方法：

$('sticky-notes-container-selector').delegate('click','#stickyNoteSave13',function(){/*...*/});

來源

2012-04-22 19:11:20

不推薦的jQuery 1.7後jQuery的生活，所以你應該使用在（）

$(document).on('click', '#stickyNoteSave13', function(){/*...*/});

來源

2012-04-22 19:12:31

.click（）適用於靜態內容，但不適用於從Ajax調用插入的內容

回答

相關問題