2016-04-27 1 views
1

jquery.jsをリロードせずにjavascriptを使用する要素を作成するにはどうすればいいですか? 私はすでにレイアウトにロードしています。Cakephp 3.1 Javascript

毎回ロードする必要があります。 これは私の要素/ contacts.ctp

(entire html) 
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"> 
</script> 
<script type="text/javascript" src="js/bootstrap/novo.js"> 
</script> 
<script type="text/javascript"> 
    var id = '1'; 
    $(function(){$(document).on('click', '.btn-add', function(e){ 

     e.preventDefault(); 

     var inpute = '<div class="entradas-'+id+'" hidden></br><select class="form-control" id="tipo." name="abc['+id+'][tipo_id]"><?php foreach($contatotipo as $tipo): ?><option value="<?= $tipo->id; ?>"><?= $tipo->nome; ?></option>    <?php endforeach; ?>   </select>   <input class="form-control" id="contato" placeholder="Preencher" name="abc['+id+'][contato]">   <button class="btn btn-danger btn-remove" id="addcontato" type="button">    <span class="fa fa-minus"></span>   </button> </br> </div>'; 
     $(".novas").before(inpute); 
     $('.entradas-'+id).slideDown('slow'); 
     return id++; 
    }) 
    .on('click', '.btn-remove', function(e) 
    { 
     $(this).closest('div').slideUp(); 

     e.preventDefault(); 
     return false; 
    }); 
    }); 
</script> 
+1

私が正しく理解していれば、すべてのページのスクリプトタグを ''に含めますか?それらを ''タグの間のヘッダーファイルに入れて、すべてのページのヘッダーファイルをロードして、自分で繰り返す必要はありません。 – Ozrix

+0

ヘッダーにロードするとテンプレートのスクリプトは機能しません。 –

+0

すべてを '$(document).ready(関数(){{}})にラップしてください;スクリプトがページのすべての要素をレンダリングするのを待つために – Ozrix

答えて

1

まずでは、別のファイルにカスタムのJavaScriptコードを配置しました。次に、この

$(document).ready(function(){ 
    var id = '1'; 

    $(function(){$(document).on('click', '.btn-add', function(e){ 
     ... 
    } 
    ... 
}); 

のように、$(document).ready()関数内でそれをラップこれは、ページ上のすべての要素が描かれているまで、コードの実行を待機するようにjQueryに指示します。その後

<head>タグ内のすべてのスクリプトをロード:

<html> 
    <head> 
     <script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"></script> 
     <script type="text/javascript" src="js/bootstrap/novo.js"></script> 
     <script type="text/javascript" src="js/your/custom/path.js"> 
    </head> 

は、すべてのページに同じヘッダーを作成し、あなたが行ってもいいです。

+1

チャーム。ありがとうございました。 –

関連する問題