2017-07-19 44 views
0
其他頁面

後被禁止我有一個包裝反應成分的html文件,下面是代碼:javascript函數路線

<!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模式顯示和所有jav ascript函數,如警告,我把(見上面的HTML文件)被解僱,但如果我從側邊欄鏈接訪問頁面的JavaScript功能被禁用或不起作用,例如

我訪問/側邊欄鏈接然後我點擊/admin,我點擊按鈕顯示模式,它不顯示模態。

我使用反應路線v4 和我的問題是完全相同的像this但我想要更簡單,有效和高效的方式。

任何人都可以幫忙嗎?謝謝。

+0

我很抱歉,但我沒有看到任何反應組分? –

+0

檢查上面,我已經添加它 – Mamen

+0

你有沒有試過改變''到'' –

回答

0

我認爲這個問題是jQuery中像here DOM更新後綁定,你應該改寫這一行:

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

這樣:

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

這意味着我必須編輯bootstrap.js? – Mamen

+0

我的意思是特別是從第一個文件的行.. – Melounek