跟踪点击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(); 
      }); 
     });