調用JSON函數與JSON設置錨

Question

我想呈現一個JSON對象在一個手風琴的錨點標記的JSP上點擊應調用一個jQuery函數。這個jQuery函數然後打開了那個手風琴。

這是jQuery函數：

function accordion(){ 
     $('.mrc-accordion .columns > ul > li > a').click(function(e){ 
      if(!$(this).parents('li').hasClass('active')){ 
       $(this).parents('li').addClass('active').children('section').slideToggle(); 
      }else{ 
       $(this).parents('li').removeClass('active').children('section').slideToggle(); 
      } 
      e.preventDefault(); 
      return false; 
     }) 
    } 

這是JSP代碼：

<div class="mrc-accordion mrc-accorweb mrc-newsRoom"> 
. 
. 
. 
<ul id="somerandom"> 
</ul> 
</div> 

我渲染JSON對象是這樣的：

var webcastsListing = document.getElementById('somerandom'); 
jsonString=getFormattedJson(webcast); 
webcastsListing.innerHTML = jsonString; 

function getFormattedJson(webcast) { 
    var temp = '<li><a href="#">'+webcast.title+'</a><section><ul class="mrc-contactDetail webcast"><li><p>'+webcast.description+'</p></li></ul></section></li>'; 
    return temp; 
} 

的jsonString對象正在創建如下：

<li><a href="#">Mercer Webcasts 2014 First Detail page</a><section><ul class="mrc-contactDetail webcast"><li><p>Mercer Webcasts 2014 First Detail page description</p></li></ul></section></li> 

它在<ul id="somerandom"></ul>建立了很好的一樣：

<ul id="somerandom"><li><a href="#">Mercer Webcasts 2014 First Detail page</a><section><ul class="mrc-contactDetail webcast"><li><p>Mercer Webcasts 2014 First Detail page description</p></li></ul></section></li></ul> 

，但是當我點擊的錨標記，功能手風琴（）不會被調用。而如果我手動設置的代碼片段：在JSP

<li><a href="#">Mercer Webcasts 2014 First Detail page</a><section><ul class="mrc-contactDetail webcast"><li><p>Mercer Webcasts 2014 First Detail page description</p></li></ul></section></li> 

內<ul id="somerandom"></ul>，我可以看到被調用的函數錨的點擊預期和手風琴按預期工作。我不明白爲什麼使用Javascript和JSON做同樣的事情時，函數accordion（）沒有被調用。

任何幫助，非常感謝。

謝謝。

Answer 1

這是因爲應用事件處理程序才能從JSON添加標記。 而手動添加標記時，當應用事件處理程序時，DOM標記和其他元素已經存在於DOM中。您可以通過兩種方式解決這個問題：

1. 呼叫accordion()你填充從JSON字符串ul元素之後;或

2. 使用jQuery on event handler如下：

   $(document).on('click', '.mrc-accordion .columns > ul > li > a', function(event) { 
       if(!$(this).parents('li').hasClass('active')) { 
        $(this).parents('li').addClass('active').children('section').slideToggle(); 
       } else { 
        $(this).parents('li').removeClass('active').children('section').slideToggle(); 
       } 
       e.preventDefault(); 
       return false; 
   });