Question

我使用ajax从php文件中获取数据。循环使用json对象并使用ajax创建按钮。我想在动态创建的按钮上添加一个onclick事件，以便我可以调用一个函数，将记录的当前ID传递给它，然后执行一些操作，如删除或更新。

'<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 ');
        });*/

    }
});

Answer 1

添加此函数以附加测试函数以动态添加按钮并从Ajax请求中删除test（）函数

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

从按钮

中删除onclick属性

Answer 2

在脚本上简单添加此功能

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

它适用于你。

Answer 3

将class属性添加到动态添加的按钮，并将onclick jquery函数添加到按钮。使用此代码。

历史

使用像这样的jquery函数

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

或

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

Answer 4

我编写了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>

Answer 5

调用内联函数只能在全局范围内工作，因此在成功回调之外定义它。或者你可以动态地附加监听器，如下所示：

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

然后可以在全局范围内定义test()函数。您可以添加off('click')以确保始终只有一个侦听器在按钮上。也许更高效的选择可能如下：

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

这样，只需要连接一个侦听器，并且在添加新按钮时不必重新连接。

如何使用jquery在动态创建的按钮上添加onclick方法

5 个答案: