0

所以我得到了一个选择菜单，当用户选择一个选项时，它通过 ajax 调用一个 post 函数，该函数通过 PHP 生成一些表行，然后返回它的 html 编码。在其中，有一个添加按钮。

我想要做的是，当用户单击添加按钮时，会出现一个表单。但由于某种原因，它不起作用......

这是代码：

$(document).ready(function () {
    $(".add_form").hide();

    $("#console").change(function () {
        var id = $(this).val();
        var dataString = 'console_id=' + id;

        $.ajax({
            type: "POST",
            url: "generate-games-list",
            data: dataString,
            cache: false,
            success: function (html) {
                $("#games_table_body").html(html);
            }
        });

    });

    $(".add_button").click(function () {
        alert("HELLO");
        var id = this.id;

        $.post('manage_games', 'game_id=' + id, function (response) {
            alert(response);
        });

        $("#game_id").val(id);
        $(".add_form").show();

    });

});

这是返回表格行的 PHP 代码：

$console = Console::find(Input::get('console_id'));
    $type = GameType::find(Input::get('type_id'));

    if(!Input::has('console_id'))
        return "Error";
    else{

        foreach($console->games()->get() as $console_game){
            $available_consoles_string = "";
            $game_types_string = "";

            //Get all the consoles the game can be played on
            foreach($console_game->consoles()->orderBy('name', 'asc')->get() as $available_consoles){
                $available_consoles_string = $available_consoles_string . " " .$available_consoles->name .", ";
            }

            //Get all the types that the game falls in
            foreach($console_game->types()->orderBy('type', 'asc')->get() as $game_types){
                $game_types_string = $game_types_string . " " .$game_types->type .", ";
            }   

            return "<tr><td>" .$console_game->name. "</td><td>". $available_consoles_string. "</td><td>" .$game_types_string. "</td><td><input type='button' id='" .$console_game->id. "' class='add_button' value='Add'/> / View</td></tr>";

        }
    }

知道为什么它不起作用吗？当我的意思是不工作时，我的意思是警报没有出现，但我在 Chrome 控制台上没有收到任何错误...

谢谢，阿拉

4

1 回答 1

2

只需使用.on()：

$(document).on("click", ".add_button", function(){
    // your event code
});

当您的 js 运行时，click事件将附加到.add_button该类的所有当前元素。但是，您正在通过 ajax 添加额外的按钮，这些按钮不会触发相同的click事件。

要解决此问题，请使用上面的代码。它将事件附加到，document因此即使您在页面加载后添加按钮，click事件也将由它们触发。

于 2013-06-24T22:15:41.687 回答