點擊動態創建的編輯按鈕不起作用

我有這個jsfiddle其中有一個接受姓名，電子郵件和手機號碼的形式。按下添加按鈕後，新記錄插入添加按鈕下方以及2個引導圖標編輯和刪除。所以當點擊編輯按鈕時，它應該顯示列值（這隻發生在第2行），但是當新創建的記錄單擊編輯按鈕時，它不顯示任何東西。我能知道錯誤在哪裏？點擊動態創建的編輯按鈕不起作用

這是編輯按鈕jQuery代碼點擊

$('.icon-edit').click(function() { 
     //alert("hi"); 
     $('#editReords').modal({show:true}) 
var $row = $(this).parents('tr'); 
var $columns = $row.find('td'); 
     //$columns.addClass('row-highlight'); 

     var values = ""; 
     jQuery.each($columns, function(i, item) { 
      values =item.innerHTML; 
      if(i==1){ 

       alert("name:"+values); 
       //document.getElementById("name1").value = values; 
      } 
      else if(i==2){ 
       alert("emailID:"+values); 
       //document.getElementById("date1").value = values; 
      } 
else if(i==3){ 
       alert("mobile:"+values); 
       //document.getElementById("StartTime1").value = values; 
      }}); 
    }); 
    $('#save').click(function() { 
//alert("data saved"); 
    }); 
//edit records 
    });

來源

2013-11-20 SpringLearner

代表事件到最近的靜態容器 –

使用on()委託的情況下，因爲元素動態添加：

$('.icon-edit').click(function() {

應該改爲：

$("#mytable").on('click', '.icon-edit', function() {

JSFiddle

注意：您還可以使用delegate()此：

$("#mytable").delegate('.icon-edit', 'click', function() {

JSFiddle

來源

2013-11-20 10:05:49 George

感謝您的回答+1 – SpringLearner

沒問題。很高興有幫助。 – George

我可以使用$（「＃someId」）。on（'click'，'.some classt'，function（）{而不是$（'。icon-edit'）。click（function（）{ 按鈕事件 – SpringLearner

使用.on()

因爲元素被添加動態不能直接事件綁定到他們。所以，你必須使用Event Delegation。

$('#mytable').on('click','.icon-edit',function() { ..//code here })

語法

$(elements).on(events, selector, data, handler);

fiddle Demo

來源

2013-11-20 10:03:03

能否請您提供一個小提琴，感謝您的回答+1 – SpringLearner

@javaBeginner見小提琴http://jsfiddle.net/cse_tushar/4GP9c/225/。 –

@javaBeginner Welocme快樂的幫助:) –

哦SRY！我做了一個錯誤的代碼使用這樣的：

試試這個代碼，請：

$('#mytable').on('click','.icon-edit',function() { 
     //alert("hi"); 
     $('#editReords').modal({show:true}) 
var $row = $(this).parents('tr'); 
var $columns = $row.find('td'); 
     //$columns.addClass('row-highlight'); 

     var values = ""; 
     jQuery.each($columns, function(i, item) { 
      values =item.innerHTML; 
      if(i==1){ 

       alert("name:"+values); 
       //document.getElementById("name1").value = values; 
      } 
      else if(i==2){ 
       alert("emailID:"+values); 
       //document.getElementById("date1").value = values; 
      } 
else if(i==3){ 
       alert("mobile:"+values); 
       //document.getElementById("StartTime1").value = values; 
      }}); 
    }); 
    $('#save').click(function() { 
//alert("data saved"); 
    }); 
//edit records 
    });

來源

2013-11-20 10:40:11

不要發佈2個不同的答案。刪除一個 – SpringLearner

點擊動態創建的編輯按鈕不起作用

回答

相關問題