jQuery的不執行，直到我把一個破發點中的螢火蟲

我用樹枝來生成我的HTML的東西和外部JS文件來調用jQuery(document).ready(function() {....});這可能是一個簡單的問題，但我不能弄明白。jQuery的不執行，直到我把一個破發點中的螢火蟲

這裏是我的代碼： base.html.twig

<script> 
    var currentPage = "{{ path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')) }}".replace(/[0-9]|\//g, '').toLowerCase().replace('app_dev.php', ''); 
    $.ajax({ 
     type: 'GET', 
     url: "{{ asset('/app_dev.php/GetMenuJson/') }}" + currentPage, 
     success: function(data){ 
      constructMenuData(data); 
     } 
    }); 
    function constructMenuData(menuData) 
    { 
     var contentForDiv = ""; 
     //Bunch of other concatenation statements to generate the html 
     contentForDiv += "<li><a href='' class='menuLink' id='"+result[j][k]["id"]+"'>" + result[j][k]["menuName"] + "</a></li>"; 
     contentForDiv += "</div>"; 
     // At the end 
     $('#menu').html(contentForDiv); 
    } 
</script>

在我index.html.twig

{% extends "::base.html.twig" %} 
{% block javascripts %} 
{{ parent() }} 
<script src="{{ asset('bundles/productorderlookup/js/ProductOrderEdit.js') }}" type="text/javascript"></script>

ProductOrderEdit.js

jQuery(document).ready(function() { 
    $('a.menuLink').click(function (event) { 
     event.preventDefault(); 
     console.log("IN THE FUNCTION"); 
    }) 
});

我生成的HTML如下這

<ul id="menu-item"> 
    <li> 
     <a id="1" class="menuLink" href="">Release</a> 
    </li> 
    <li> 
     <a id="17" class="menuLink" href="">Other Pos</a> 
    </li> 
    <li> 
     <a id="18" class="menuLink" href="">FSC Labels</a> 
    </li> 
</ul>

問題：單擊鏈接時不起作用。我試圖用另一個函數明確地包裝它並在index.html.twig文件中調用它，但它仍然不起作用。它唯一的作用是當我在螢火蟲中放置一個斷點時。我意識到這可能是某種競爭條件或其他一些小問題，但我無法修復它。我嘗試過搜索各種問題，但迄今爲止沒有幫助。可能是什麼問題？

注意：我在頁面上有多個jQuery(document).ready(function() {...});。不知道這是否重要。

來源

2015-07-10 Dipen Shah

這應該是非常簡單。

首先，具有多個jQuery(document).ready(function() {...});不影響任何代碼流。如果您的應用有很多應用，它可能會對您的應用的性能產生負面影響，但功能應保持不變。只要一個ready中的代碼不依賴於另一個ready - 那簡直太糟糕了:)。

現在，回到你的問題：如果我看到它，你送出去ajax調用返回json然後將它們轉換爲html並投入#menu含元素菜單項。問題在於頁面已經在項目返回到您的頁面很久之前宣佈了ready事件。反過來，您的代碼

$('a.menuLink').click(function (event){ ... });

不應該綁定任何元素 - 那些還沒有。

快速修復將是使用代替click委派綁定（on），其結合不僅目前存在的元素，但是那些將在未來被創建。假設#menu元素總是存在的，你可以這樣做：

$('#menu').on('click', 'a.menuLink', function(){ 
    // Here goes your code, same as you originally intended 
});

這是否幫助？

來源

2015-07-10 15:21:52

謝謝你'ready'和問題的很好的解釋。我想我一直在想這個問題。很好的答案+1這解決了這個問題。 –

很高興我能幫到;） –

jQuery的不執行，直到我把一個破發點中的螢火蟲

回答

相關問題