按钮创建、事件处理程序、问题答案

【问题标题】：Button Creation, Event Handlers, Issues按钮创建、事件处理程序、问题
【发布时间】：2015-02-01 21:52:38
【问题描述】：

自从我使用 Javascript 或 jQuery 以来已经有一段时间了，所以我确定我在这里犯了一个愚蠢的错误，但我无法弄清楚我做错了什么。我的一个 JS 函数似乎在页面加载时运行，但在我想要的时候（单击按钮时）却没有运行。

我正在尝试从数据库中提取信息。我正在尝试测试用 PHP 编写的 API，因此我创建了一个“测试”页面。页面上还有其他数据字段，但它们都可以正常工作。我为页面创建了一个 JS 文件，现在有 3 个函数：

一个“document.ready”函数：

$(document).ready( function(){
    $( "#show_users" ).click(ShowUsers);
    $(".log_btn" ).click( ShowBSLogs(this.id));
});

对于事件处理程序，第一个用于 html 中的单个按钮，第二个用于动态创建的一组按钮。

这些事件中的每一个都应该触发其他两个函数之一：

function ShowUsers() {
    $.post( "show", function(data,status){
        console.log(data[0]);
        $( "#output" ).empty().append( "<table id='user_table' width='100' border-color='black'><tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Logs</th></tr></table>" );
        data.forEach(function(user) {
            $( "#user_table" ).append( "<tr><td>" + user.first_name + "</td><td> " + user.last_name + "</td><td> " + user.email + "</td><td><button class='log_btn' id=' "+user.u_id+" '>Logs</button></td></tr>");
        });
    
    });
}

和

function ShowBSLogs(u_id) {
    $.post( "show/uid", {id: u_id}, function(data,status){
        console.log(data);
        console.log("fired");
    });
}

当页面加载时，ShowBSLogs 被调用，因为它没有被传递一个变量，它会导致错误。当我单击原始按钮并调用 ShowUsers 时，它运行良好，我得到一个包含名字和姓氏、电子邮件的表格以及一个带有与用户关联的 id 的按钮，但是当我单击该按钮时， ShowBSLogs 未被调用。

我很乐意从其他文件发布更多代码，但我相当肯定错误就在这里。如果您还需要什么，请告诉我。

有人吗？

【问题讨论】：

你设法问了与你前两分钟问的问题相同的问题 -> stackoverflow.com/questions/28268338/…
@adeneo 等等...我没看到。在您的问题中，您尝试将一个函数（没有返回任何内容）的返回值传递给另一个函数。除了 this.id 是按钮的属性，我没有传递任何值。更大的问题是该函数在文档加载时被调用，而不是我没有传递正确的值。
好吧，我来帮你！不能用括号....添加匿名函数....$(".log_btn" ).click( function() { ShowBSLogs(this.id); });
这解决了失火问题，但是当我单击按钮时它仍然无法运行该功能......不过感谢您朝着正确的方向迈出了一步！

标签： jquery button jquery-events

【解决方案1】：

通过创建一个按钮对象然后将其附加到表格行来解决这个问题，然后我设置了事件处理程序（.click）。我不确定为什么会这样，因为我在这个最终解决方案上尝试了许多不同的变体，但都没有奏效，但我发布了我的解决方案以防它对其他人有所帮助。

test.js：

$(document).ready( function(){
    $( "#show_users" ).click( function() { ShowUsers();         });
    $( ".log_btn"    ).click( function() { ShowBSLogs(this.id); });
});


function ShowUsers() {
    $.post( "show", function(data,status){
        console.log(data[0]);
        $( "#output" ).empty().append( "<table id='user_table' width='100' border-color='black'><tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Logs</th></tr></table>" );
        data.forEach(function(user) {
            var row = $(" <tr><td>" + user.first_name + "</td><td> " + user.last_name + "</td><td> " + user.email + "</td></tr>");
            var button = $('<button/>', {
                text: 'Logs',
                class: 'log_btn',
                id: user.u_id });
            row.append(button);
            $( "#user_table" ).append(row );
        });
        $( ".log_btn" ).click( function() { ShowBSLogs(this.id); }); //set event handler

    });
}


function ShowBSLogs(u_id) {
    console.log(u_id);
    $.post( "show/uid", {id: u_id}, function(data,status){
        console.log(data);
        console.log("fired");
    });
}

【讨论】：