與symfony和樹枝jquery按鈕

我嘗試做一個基本的事件工作，我想打印一些東西到我的控制檯，當我點擊一個按鈕。我無法使它與jQuery的工作，我不知道爲什麼。我有我的HTML是一個樹枝文件，它是我的網站的基礎。然後，當我想用我的偵聽器作爲我的按鈕時，我有另一個樹枝文件。我在網站botstrap中使用了這個html。與symfony和樹枝jquery按鈕

我的主模板：

<!DOCTYPE html> 
 
<!-- saved from url=(0043)http://getbootstrap.com/examples/jumbotron/ --> 
 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 

 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
<meta name="description" content=""> 
 
<meta name="author" content=""> 
 
<link rel="icon" href="http://getbootstrap.com/favicon.ico"> 
 

 
<title>{% block title %}Welcome!{% endblock %}</title> 
 
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
{% block stylesheets %}{% endblock %} 
 
<!-- Bootstrap core CSS --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     
 
     <a class="navbar-brand" href="/">Skeletons ONLINE</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 

 
     <form class="navbar-form navbar-right"> 
 
      {% block menu %}{% endblock %} 
 

 
      <input type="button" value="Inscription" href="/registration" id="button_registration"/> 
 
      <div class="form-group"> 
 
      <input type="text" placeholder="Email" class="form-control" id="input_email"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <input type="password" placeholder="Password" class="form-control" id="input_password"> 
 
      </div> 
 
      <input type="submit" class="btn btn-success" value="Sign In" id="button_login"/> 
 
     </form> 
 
     </div><!--/.navbar-collapse --> 
 
    </div> 
 
    </nav> 
 

 
    <!-- Main jumbotron for a primary marketing message or call to action --> 
 
</br> 
 
</br> 
 
</br> 
 
{% block body %}{% endblock %} 
 

 
{% block javascripts %}{% endblock %} 
 
</body> 
 
</html>

我還有一個樹枝文件herite形成我的基地：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
{% extends 'base.html.twig' %} 
 

 
{% block menu %} 
 
<input type="button" value="Construction" href="/construction" id="button_building"/> 
 

 
{% endblock %} 
 

 
{% block javascripts %} 
 
<script> 
 
\t console.log("k"); 
 

 
\t $("#button_login").click(function() 
 
\t { 
 
\t \t console.log("button login"); 
 
\t \t var email = $("#input_email").val(); 
 
\t \t var password = $("#input_password").val(); 
 

 
\t \t console.log(email); 
 
\t \t console.log(password); 
 

 
\t }); 
 
\t 
 
</script> 
 

 
{% endblock %}

所以我的第一個console.log顯示k到我的控制檯，但是當我點擊我的按鈕時，沒有顯示「按鈕登錄」。

來源

2017-03-15 Zul Huky

您需要從第二個模板中刪除第一行，因爲「擴展另一個模板的模板不能在Twig塊外包含內容」。此外，JQuery已添加到您的基本模板中。

您可能需要一個「e.preventDefault（）;」另外，因爲如果表單被提交，頁面將重新加載，除非在瀏覽器中選中「保留日誌」，否則不會看到控制檯日誌輸出。試試這個：

{% extends 'base.html.twig' %} 

{% block menu %} 
<input type="button" value="Construction" href="/construction" id="button_building"/> 

{% endblock %} 

{% block javascripts %} 
<script> 
    console.log("k"); 

    $("#button_login").click(function(e) 
    { 
     e.preventDefault(); 
     console.log("button login"); 
     var email = $("#input_email").val(); 
     var password = $("#input_password").val(); 

     console.log(email); 
     console.log(password); 

    }); 

</script> 

{% endblock %}

來源

2017-03-16 01:27:29

它，我的'輸入類型= 「提交」'所以是的，它會提交表單，如果你@ LP154沒有不使用'e.preventDefault（）' – LP154

閱讀基本模板，所以我的論點是無效的 – DarkBee

請檢查下面的代碼，可能會有所幫助，您只需要將您的代碼放在點擊功能中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
{% extends 'base.html.twig' %} 
 

 
{% block menu %} 
 
<input type="button" value="Construction" href="/construction" id="button_building"/> 
 

 
{% endblock %} 
 

 
{% block javascripts %} 
 
<script> 
 
\t console.log("k"); 
 
    $(document).ready(function() { 
 
\t $("#button_building").click(function() 
 
\t { 
 
      alert("Test"); 
 
\t \t 
 
\t }); 
 
    }); 
 
</script> 
 

 
{% endblock %}

來源

2017-03-17 13:15:47

與symfony和樹枝jquery按鈕

回答

相關問題