Question

所以我得到了一个选择菜单，当用户选择一个选项时，它通过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控制台上没有收到任何错误...

谢谢， ARA

Answer 1

只需使用.on()：

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

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

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

带有Ajax帖子的.click函数

1 个答案: