Question

我有包装反应组件的html文件，下面是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content=""><!--
    <link rel="shortcut icon" href="assets/img/logo-fav.png"> -->
    <title>Loyalty Multipolar</title>
    <link rel="stylesheet" type="text/css" href="/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/css/style.css" type="text/css"/>
    <style type="text/css">
      .modal-body {
          max-height:400px;
          overflow-y:auto;
      }
    </style>
  </head>
  <body>
    <div id="root">

    </div>
  <script src="bundle.js"></script>

  <script src="/lib/jquery/jquery.min.js" type="text/javascript"></script>
  <script src="/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
  <script src="/js/main.js" type="text/javascript"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/lib/jquery.niftymodals/dist/jquery.niftymodals.js" type="text/javascript"></script>
  <script type="text/javascript">
    $.fn.niftyModal('setDefaults',{
      overlaySelector: '.modal-overlay',
      closeSelector: '.modal-close',
      classAddAfterOpen: 'modal-show',
    });

    $(function(){
      Plugins.init();
      $('.admin').click(function(){//button modal 
        alert('alert');
      });
    });

  </script>
  </body>
</html>

这是我的管理页面

import React, {Component} from 'react';

import CreateForm from '../Component/Admin/CreateForm';

class AdminPage extends Component {

  render(){
    return(
      <div className="be-content">
        <CreateForm/>
        <div className="page-head">
          <h2 className="page-head-title">Manage Admin</h2>
          <ol className="breadcrumb page-head-nav">

            <li><a href="#">Admin</a></li>
            <li className="active">Index</li>
          </ol>
        </div>
        <div className="main-content container-fluid">
          <div className="panel panel-flat">
            <div className="panel-heading">
              Admin
              <button data-modal="create" className="btn btn-space btn-primary pull-right md-trigger admin">Create New</button>
            </div>
            <div className="panel-body">

            </div>
          </div>
        </div>
        <div className="modal-overlay"></div>

      </div>
    );
  }

}

export default AdminPage;

我的问题是：

我有管理员的页面，其中有一个模态，我使用模态来显示表单，当我们开始页面或从地址栏输入路线地址时例如：localhost:3000/admin模态显示和所有javascript功能，如我放的警报（见上面的html文件）被解雇，但如果我从侧边栏链接访问页面javascript函数被禁用或不起作用，例如

我从侧边栏链接访问/然后点击/admin然后点击按钮显示模态，它不显示模态。

我正在使用反应路线v4 我的问题与this完全相同，但我想要更简单，有效和高效的方法。

任何人都可以提供帮助？谢谢。

Answer 1

我认为问题出在像here这样的DOM更新之后的jQuery绑定中，你应该重写这一行：

$('.admin').click(function(){//button modal

到此：

$(document).on('','.admin',function(){//button modal

路线到其他页面

1 个答案: