javascript - Jquery load() 使页面刷新

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

使用<button type="submit">创建一个按钮，单击该按钮即可提交表单，从而使浏览器加载表单的操作页面(此处为“投票”)。您可以使用 jQuery 来防止这种情况，就像 erkaner 的答案一样，或者您不能首先将其设置为提交按钮。 <button type="button">不会做任何意想不到的事情。