跟蹤點擊jQuery創建按鈕

Question

我想創建一個按鈕點擊按鈕，如果這個創建的按鈕也點擊應該有另一個動作。

這裏是我的代碼：

//EDIT FUNCTION 
      $('.edit').on('click', function(e){ 
       e.preventDefault(); 
       content = $(this).prop('name'); 
       id = $(this).prop('id'); 
       if(!document.getElementById('editnews')) { 
        jQuery('#edit').append('</br><textarea id="editnews" value="'+id+'"></textarea></br>');//is not shown, needed to stop, damn online lib 
        jQuery('#edit').append('<button name="'+id+'" class="saveedit btn btn-success btn-mini"><span class="glyphicon glyphicon-pencil"></span> Save</button>'); 
       } 
       $('#editnews').val(content); 
      }); 

     // EDIT (SEND) FUNCTION 
     $('.saveedit').on('click', function(e){ 
      console.log("oke"); 
      e.preventDefault(); 
      $.ajax({ 
       type: 'POST', 
       url: 'index.php?page=news', 
       data: {editid:$(this).prop('name'), editcontent:$('#editnews').val()} 
      }).done(function(response) { 
       location.reload(); 
      }); 
     }); 

所以第一個編輯功能工作正常，但第二次沒有按鈕無法跟蹤。 希望你能幫助MEH

Answer 1

你需要以動態創建的元素綁定事件使用event-delegation

$('#edit').on('click','.saveedit', function(e){ 
    console.log("oke"); 
    e.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: 'index.php?page=news', 
     data: {editid:$(this).prop('name'), editcontent:$('#editnews').val()} 
    }).done(function(response) { 
     location.reload(); 
    }); 
}); 

Answer 2

它不工作，因爲該事件被連接到.saveedit可用在DOM在劇本執行的時候。任何動態創建的.saveedit都不會附加此事件。

你要做的是什麼，只要任何.saveedit點擊裏面document存在於document即處理其附加的單擊事件：

$(document).on('click', '.saveedit', function(e){ 
      console.log("oke"); 
      e.preventDefault(); 
      $.ajax({ 
       type: 'POST', 
       url: 'index.php?page=news', 
       data: {editid:$(this).prop('name'), editcontent:$('#editnews').val()} 
      }).done(function(response) { 
       location.reload(); 
      }); 
     });