Question

我有一个非常简单的脚本，通过按下按钮，需要加载其他PHP脚本（不重定向，但加载在该页面的div中）。现在一切正常，但仍然存在一个小问题。

页面自我更新，我不知道是因为功能加载还是因为按钮处于表单中？

我的HTML代码：

<div class="widget">
    <!-- Widget title -->
    <div class="widget-head">
        <div class="pull-left">Poll</div>
        <div class="widget-icons pull-right">
            <a href="#" class="wminimize"><i class="fa fa-chevron-up"></i></a>
            <a href="#" class="wsettings"><i class="fa fa-wrench"></i></a>
            <a href="#" class="wclose"><i class="fa fa-times"></i></a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="widget-content">
        <!-- Widget content -->
        <div class="padd">
            <p>U kunt hier de <strong>polls beheren</strong> die onder andere worden weergeven op de homepagina van
                <?php echo $site[ 'name']; ?>
            </p>
            <hr />
            <form method="post" class="form-horizontal" role="form" action="poll">
                <div class="form-group">
                    <label class="control-label col-sm-1" for="name">Poll naam:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-name" id="poll-name" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="question">Poll vraag:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-question" id="poll-question" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option1">Optie 1:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option1" id="poll-option1" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option2">Optie 2:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option2" id="poll-option2" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option1">Optie 3:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option3" id="poll-option3" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option1">Optie 4:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option4" id="poll-option4" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2">
                        <button type="submit" name="poll-submit" id="poll-submit" class="btn btn-danger"><i class=""></i> Poll toevoegen</button>
                    </div>
                    <div class="col-sm-12">
                        <div class="pull-right">
                            <button type="submit" name="poll-list" id="poll-list" class="btn btn-primary"><i class=""></i> Poll lijst</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<div class="widget" style="display: none;" id="widget2">
    <!-- Widget title -->
    <div class="widget-head">
        <div class="pull-left">Poll-lijst</div>
        <div class="widget-icons pull-right">
            <a href="#" class="wminimize"><i class="fa fa-chevron-up"></i></a>
            <a href="#" class="wsettings"><i class="fa fa-wrench"></i></a>
            <a href="#" class="wclose"><i class="fa fa-times"></i></a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="widget-content">
        <!-- Widget content -->
        <div class="padd" id="padd2">
        </div>
    </div>
</div>

我的JS代码：

/* Dit is een aparte JS bestand, dit heeft geen PHP handler. Dit include wel een PHP bestand om te poll lijst op te halen. */
$('#poll-list').click(function() {

    $('#widget2').show('fast');

    // Pagina inladen.
    $('#padd2').load('poll-list.php', function() {

        noty({
            text: 'De poll lijst is succesvol ingeladen'
        });
    });

});

所以我知道一切正常，因为div在页面上显示（http://prntscr.com/72yu6q） 但是2秒后页面会刷新，并且没有点击按钮，因此div没有显示。

提前感谢您，也对任何错误的语法或拼写错误表示歉意！

Answer 1

您可以添加event.preventDefault()：

 $('#poll-list').click(function(event){
     event.preventDefault();
 })

Answer 2

使用<button type="submit">创建一个按钮，在单击时提交表单，导致浏览器加载表单的操作页面（此处为'poll'）。你可以在erkaner的答案中使用jQuery来防止这种情况，或者你不能把它作为一个提交按钮。 <button type="button">不会做任何意外的事情。

Answer 3

将所有内容包装在$（document）.ready（）函数

中

$( document ).ready(function() {
    console.log( "ready!" );
});

Jquery load（）使页面刷新

3 个答案: