javascript - jQuery Modal 仅在单击后打开一次

标签 javascript jquery html ajax modal-dialog

我遇到了一些让头感觉很沉重的问题...我已经在这个论坛中搜索了答案,但问题仍然没有解决。 我的问题是我有一个链接到模态的按钮。当页面刷新后第一次打开模式时,单击按钮。但不是第二次。 我检查了日志,日志说

TypeError: $(...).modal is not a function[Learn More]. 

如果我刷新页面,它只会工作一次,第二次单击按钮时,模态不会再次打开...

这是我的按钮 HTML View 代码..

<button class="btn btn-info btn-sm btn-labeled" type="button" id="tambahUser" data-toggle = "modal" value="<?= Url::to(['/module/create'],true)?>">

这是我的模式

    <div id="modalSignUpSm" tabindex="-1" role="dialog" class="modal fade">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <button type="button" class="close" data-dismiss="modal" id="tutupModal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Colored Header Modal</h4>
      </div>
      <div class="modal-body">
        <div id="modalContent"></div>
      </div>
    </div>
  </div>
</div>  

这是我的js代码,负责处理按钮的点击事件

$('#tambahUser').click(function(event){
    $('#modalSignUpSm').modal({
        backdrop: 'static',
        keyboard: false,
    })
    .modal('show')
    .find('#modalContent')
    .load($(this).attr('value'));
});

$('#tutupModal').click(function(){
    $('#modalSignUpSm').modal('close');
});

这是我的 Module/create Controller (我正在使用 Yii2)

public function actionCreate()
{
    $model = new Module();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(Url::to(['/paneladm/pengaturan/module',true]));
    } else {
        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }
}

我的问题是为什么模式只打开一次,之后按钮就卡住了..?如何解决这个问题...

注意: - 我是 jQuery 的新手,我将非常感谢您的每一个答案。 - 我在这个论坛上搜索并尝试通过创建一个按钮来解决,点击的每个按钮都会触发 .modal('close') 但仍然不起作用

最佳答案

您应该使用 Bootstraps 数据属性来触发模式打开和关闭,通过 JavaScript 手动使用触发器。现在你正在尝试两者兼而有之。请参阅this example .

因此,我将删除 Bootstrap 数据属性,然后确保您的 Bootstrap 脚本在您自己的 javascript 之前加载。

关于javascript - jQuery Modal 仅在单击后打开一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43830146/

相关文章:

python - 在 Python 中使用 Selenium 或 PIL 获取特定 CSS 类的图像大小

javascript - 在 Angular SPA 中异步加载脚本

javascript - react : The `value` prop supplied to <select> must be a scalar value if `multiple` is false

javascript - 我使用 AngularJS 的计时器在 HTML 页面中不起作用

javascript - 第一个菜单项未被选中

javascript - 如果选中另一个复选框,JQuery 将禁用该复选框

javascript - 如何使用 SailsJS 和 MongoDB 在生产模式下迁移模型

Javascript - 传递预定义值

javascript - 单击时,单击其他内容,防止默认。我如何使用 jQuery 正确地做到这一点?

javascript - jCarouselLite 插件没有按预期工作