从动态创建的按钮触发 JavaScript 函数

发布于 2024-12-11 19:57:13 字数 1282 浏览 0 评论 0原文

更新的代码和问题: 我正在为我的 RPC 服务器创建一个测试工具。目前,它由一个页面组成,该页面立即发出 AJAX 请求以检索服务器上的所有功能。返回后,它会创建一个按钮列表,以便我可以单击进行测试。最终,我将添加对话框来测试传递给函数的参数,但目前我只想在单击按钮时触发基本请求。我看到的问题是 onclick 函数总是触发列表中的最后一个函数,大概是因为当单击被触发时,键被设置为数组中的最后一个值。我想传递button.innerHTML值,但这也受到最后一个button.innerHTML是最终键的影响。

我需要做什么才能正确启动该操作?

这是代码的业务端:

$(document).ready(function() {

$.jsonRPC.setup({
    endPoint: '//api.localhost/index.php'
});

$.jsonRPC.request('getExampleData', {
    params: [],
    success: function(result) {
        for (var key in result.result) {
            console.log(key+' => '+result.result[key]);

            var button = document.createElement('button'); 
            button.innerHTML = result.result[key]; 
            button.onclick = function() { callRPCFunction(result.result[key]); return false; } 
            var foo = document.getElementById("page"); 
            foo.appendChild(button); 
        }
    },
    error: function(result) {
        console.log(result);
    }
});
});

function callRPCFunction(target) {
    $.jsonRPC.request(target, {
        params: [],
        success: function(result) {
            console.log(result);
        },
        error: function(result) {
            console.log(result);
        }
    }); 
}

Updated code and issue:
I am creating a test harness for my RPC server. Currently it consists of a page which immeadiately fires off an AJAX request to retrieve all functions on the server. Once that is returned it creates a list of buttons so I can click to test. Eventually I will add dialog boxes to test parameter passing to the functions but currently I want to just fire off the basic request when I click the button. The issue I am seeing is that the onclick function is always firing the last function in the list presumably because when the click is fired key is set to the last value in the array. I thought to pass button.innerHTML value but that too suffers that the last button.innerHTML is that of the final key.

What do I need to do to fire off the action correctly?

Here is the business end of the code:

$(document).ready(function() {

$.jsonRPC.setup({
    endPoint: '//api.localhost/index.php'
});

$.jsonRPC.request('getExampleData', {
    params: [],
    success: function(result) {
        for (var key in result.result) {
            console.log(key+' => '+result.result[key]);

            var button = document.createElement('button'); 
            button.innerHTML = result.result[key]; 
            button.onclick = function() { callRPCFunction(result.result[key]); return false; } 
            var foo = document.getElementById("page"); 
            foo.appendChild(button); 
        }
    },
    error: function(result) {
        console.log(result);
    }
});
});

function callRPCFunction(target) {
    $.jsonRPC.request(target, {
        params: [],
        success: function(result) {
            console.log(result);
        },
        error: function(result) {
            console.log(result);
        }
    }); 
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

谎言 2024-12-18 19:57:13

在将 element 添加到 DOM 之前,对 element.onClick 的赋值将不起作用。您可以在 foo.appendChild(element); 之后调用 element.onClick(callRPCFunction(result.result[key]));。这可能有用!

您可以在这里使用 jQuery 的 live(),它是为了以下目的而创建的:

$(element).live('click', callRPCFunction(result.result[key])

Assignment to element.onClick will not work until the element is added to the DOM. You may call element.onClick(callRPCFunction(result.result[key])); after foo.appendChild(element);. That might work!

You may use jQuery's live() here, it was created for these purposes:

$(element).live('click', callRPCFunction(result.result[key])

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文