单击ajax加载的按钮时调用JavaScript函数

Call JavaScript function when button loaded by ajax is clicked

本文关键字：调用 JavaScript 函数 按钮 ajax 加载 单击      更新时间：2023-09-26

我有一个html表单，它通过ajax加载内容，并包含一些按钮，单击这些按钮时，应该执行html页面的脚本标记中定义的JavaScript函数。SO：按钮是通过ajax加载的（有效），但当点击按钮时，它不会触发所需的操作，也不会触发Firebug中的JavaScript错误。如何获得通过ajax加载的一堆按钮的onclick信号，以绑定到现有的JavaScript函数？

编辑：我还应该注意到，我没有使用JQuery。如果这是唯一的方法，我愿意这样做，但除此之外，我更喜欢只使用本地JavaScript。

编辑2：我的问题有点复杂，但正如所选答案中所述，在通过ajax发送数据之前，您应该能够在php脚本中设置onclick事件处理程序。如果您有大量数据响应，并且希望减少带宽，您可能会考虑在客户端执行所有操作，但我发现在大多数情况下，只需在php脚本中设置onclick属性更容易。

动态生成的按钮可以绑定一个内联事件。生成按钮时，只需确保它有一个onclick="alreadyExistingFunc();"，页面就会愉快地执行它。

或者，当AJAX数据完成将自己写入文档时，找到新按钮并将事件绑定到它们：

function ajaxSuccess()
{
    document.getElementById('newButtonIdHere').onClick = function() {
        alreadyExistingFunc();
    }
}

这就行了。还要注意，如果您"需要"jQuery的一小部分来做一些事情（比如选择器或事件处理），那么您几乎总是可以在不加载整个库的情况下完成。

将HTML（检索到的AJAX响应）附加/插入到DOM并将click事件绑定到它：

function alreadyExistingFunc() { 
    alert('button is clicked!'); 
}
var ajax_data ="<button id='my-button'>My Button</button>";
$('body').append(ajax_data).find('#my-button').on('click', function(e){
    alreadyExistingFunc();
    // some more code...
});

或：

$('body').append(ajax_data).find('#my-button').on('click', alreadyExistingFunc);

您也可以使用回调：

function getAjaxContent(callback) {
    $.ajax({url: "url"}).done(function() {
      callback(data);
    });
}
getAjaxContent(function (data) {
    //ajax content has been loaded, add the click event here
}
相关文章：