2

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

编辑:我也应该注意到我没有使用 JQuery。如果这是唯一的方法,我愿意这样做,但除此之外,我宁愿只使用本机 JavaScript。

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

4

3 回答 3

2

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

或者,当您的 AJAX 数据完成将自身写入文档时,找到新按钮并将事件绑定到它们:

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

这应该够了吧。另请注意,如果您曾经“需要”一小部分 jQuery 来做某事(例如选择器或事件处理),您几乎总是可以在不加载整个库的情况下完成它。

于 2013-02-16T02:44:34.290 回答
1

将 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);
于 2013-02-15T17:09:10.340 回答
0

您还可以使用回调:

function getAjaxContent(callback) {
    $.ajax({url: "url"}).done(function() {
      callback(data);
    });
}

getAjaxContent(function (data) {
    //ajax content has been loaded, add the click event here
}
于 2013-02-15T17:23:42.853 回答