.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调用插入的内容

回答

相关问题