如何使用jquery在動態創建的按鈕上添加onclick方法

-1

我使用ajax從php文件中提取數據。循環瀏覽json對象並使用ajax創建按鈕。我想在該動態創建的按鈕上添加一個onclick事件，以便我可以調用一個函數，將該記錄的當前ID傳遞給它，然後像刪除或更新一樣執行一些操作。如何使用jquery在動態創建的按鈕上添加onclick方法

'<button type="button" onclick="test()" id="btnHistory" class="btn btn-success">History</button> '

但它給我一個錯誤說測試函數沒有定義。

這裏是我的全部代碼：

$.ajax({ 
    type: "POST", 
    url: "../php_scripts/getUnits.php", 
    success: function(data){ 
     var items = JSON.parse(data); 

     /*var btnSomething = $("<button>") 
     .attr('class', 'btn btn-danger') 
     .attr('id', 'asdf') 
     .html('Save'); 
*/ 


//$('#content').append(btnSomething); 

     for (var i = 0; i < items.length; i++) { 

      //test(); 
      $('#myTable').append('<tr><td>' + items[i].unitId + '</td><td>'+ 
      items[i].pcName +'</td><td>'+ items[i].user + '</td><td>'+ 
      items[i].department+'</td><td>'+items[i].location+ '</td><td>'+ 
      items[i].dateAssigned + '</td><td>' + items[i].status +'</td><td>' + 
      '<button type="button" onclick="test()" id="btnHistory" class="btn btn-success">History</button> ' + 
      '<button id="btnUpdate" class="btn btn-primary">Update</button> ' + 
      '<button id="btnDelete" class="btn btn-danger">Delete</button> ' + 
      '</td></tr>'); 
     } 

     function test(){ 
      alert('test'); 
     } 

     /*$(document).on("click", "#btnHistory", function(){ 
      alert ('History clicked '); 
     });*/ 

    } 
});

來源

2017-07-05 void null

作爲錯誤說你沒有測試功能 – guradio

但它的定義在那裏.. 還附加數據到我的表之前，我稱之爲測試功能。完美的作品，但當我打電話給我的按鈕的onclick事件時，它是未定義的 –

你有它在文檔準備好嗎？把它移出 – guradio

在你的腳本

function test() { 
    alert('working'); 
// your code 
}

它會爲你工作簡單的附加此功能。

來源

2017-07-05 07:33:47

添加此功能附加測試功能用於動態地從Ajax請求添加按鈕和刪除測試（）函數

$(document).on("click", "#btnHistory", function(){ 
    alert ('test'); 
});

刪除的onclick從按鈕

來源

2017-07-05 07:39:05 Osama

屬性類屬性添加到動態添加按鈕並添加onclick jquery函數按鈕。使用此代碼。

歷史

使用jQuery函數這樣

$(document).on("click", ".btn-history", function(){ alert ('test'); });

或

$('#table-id').on("click", ".btn-history", function(){ alert ('test'); });

來源

2017-07-05 08:04:53

我已經寫了jQuery來實現外部函數。，你也需要寫呼叫功能在裏面，如果數據是動態綁定在你的代碼$(document).on("click", "#btnHistory", function(){ });

您正在尋找的功能，使點擊判刑，但之後數據矇蔽，然後單擊方法不準備觸發，所以如果你使用上面的jQuery將解決問題。

$(document).ready(function(){ 
 
    $('.test').on('click',function(){ 
 
    alert('test'); 
 
    alert($(this).attr('id')); 
 
    }); 
 
    for (var i = 0; i < 5; i++) {  
 
    //test(); 
 
    $('#bindTable').append('<table class="table table-striped"><tr><td>Id</td><td>Pic Name</td><td>' + 
 
      '<button type="button" id="btnHistory" class="btn btn-success">History</button> ' + 
 
      ' <button id="btnUpdate" class="btn btn-primary">Update</button> ' + 
 
      ' <button id="btnDelete" class="btn btn-danger">Delete</button> ' + 
 
      '</td></tr></table>'); 
 
    } 
 
}); 
 
function test(){ 
 
    alert ('test'); 
 
} 
 
$(document).on("click", "#btnHistory", function(){ 
 
    test(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<div id="bindTable"></div>

來源

2017-07-05 09:51:02

調用函數內聯將只從全球範圍內工作，所以成功的回調之外定義它。或者你也可以只連接監聽動態，就像這樣：

$(.test).off('click').on('click', test)

然後你test()功能，可以在全球範圍內進行定義。您可以添加off('click')以確保始終只有一個監聽器位於按鈕上。也許更高性能的選擇，但是可能是由以下：

$(document).on('click', function (event) { 
    if ($(event.target).is('.test')) { 
     // call test() here 
    } 
})

這種方式，只需要連接一個監聽器，它並沒有在添加新的按鈕重新連接。

來源

2017-07-05 09:59:51

如何使用jquery在動態創建的按鈕上添加onclick方法

回答

相關問題