模态解散后,某些功能无法正常工作

时间:2017-03-14 17:52:30

标签: javascript jquery bootstrap-modal

我有这个项目,一个游戏的计数器......我的想法是当我点击"#buttonplay"时,它会运行jQuery函数并隐藏模态。这没关系,但隐藏了模态之后,DisplayMoreInfo函数不起作用......当用户点击特定游戏时,该函数必须提供更多关于它的信息。
我点击了#buttonplay之后没有运行的功能完成了游戏,并且在我创建新游戏之前显示了信息...但之后,没有做任何事情......

这是我的HTML:

<div id="contentplays" style="display: none">
        <button type="button" id="buttonplay" data-toggle="modal" data-target="#myModal">
          New Game  
        </button> <!--This button is to create a new play-->

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">New Game</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <!--Here it goes the info of the new game-->
                        </form>
                        </p>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="submitnew" class="btn btn-success">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

        <!--This is the game WITHOUT the jQuery function of the #buttonplay-->
        <div class="game done" onclick="DisplayMoreInfo(NewGame);">
            <h1>NewGame</h1><br>
            <p class="info">21&sol;01&sol;2017</p><br><br>
        </div>
        <div class="moreinfodone" id="NewGame" style="display: none">
            <p class="person">Player 1&colon; Pirulo</p>
            <p class="person">Player 2&colon; Zultano</p>
            <p class="person">Player 3&colon; Mengano</p>
        </div>
    </div>

这是我的JavaScript:

//The jQuery function
$('#submitnew').click(function () {
    $('myModal').modal('hide');
    //Some code here
});

//The function that does't work after the .modal('hide')
function DisplayMoreInfo(game) {
    $(game).toggle();
}

提前感谢您的回答!

1 个答案:

答案 0 :(得分:0)

您可能需要从

更改此行代码
onclick='DisplayMoreInfo(NewGame)';

要:

onclick='DisplayMoreInfo("#NewGame")';

为什么不起作用?

您正在尝试将NewGame传递给DisplayMoreInfo函数,该函数在此时未定义。 下次尝试使用Chrome更好地调试代码!