Javascript 在锚中设置JSON调用jQuery函数

我试图在JSP上，在一个手风琴的锚定标记中呈现一个JSON对象，单击该锚定标记应该调用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;
}  

var webcastsListing=document.getElementById（'somerandom'）；
jsonString=getFormattedJson（网络广播）；
webcastsListing.innerHTML=jsonString；
函数getFormattedJson（网络广播）{
var temp='
'+webcast.description+'
/li>'；
返回温度；
}  

正在创建的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>

美世2014年网络广播第一页详细说明

它在

中设置得很好，如下所示：

<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>

美世2014年网络广播第一页详细说明

但是当我单击锚定标记时，不会调用函数accordion（）。而如果我手动设置代码段：

 <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>

美世2014年网络广播第一页详细说明

在JSP中的

中，我可以看到在单击锚点时按预期调用函数，手风琴按预期工作。我无法理解为什么在我使用Javascript和JSON做同样的事情时没有调用accordion（）函数

非常感谢您的帮助

---

谢谢。

这是因为事件处理程序是在您可以从JSON添加标记之前应用的。 然而，当您手动添加标记时，当应用事件处理程序时，锚定标记和其他元素已经存在于DOM中。您可以通过两种方式解决此问题：

从JSON字符串填充

ul

元素后调用

accordion（）

；或

使用方法如下：

$(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;
}); 

---

嘿，谢谢你的理由和建议，第二种方法很好用。只是为了得到信息。如何确保从JSON字符串填充ul元素后调用accordion（）函数after

webcastsliting.innerHTML=jsonString并且它应该可以正常工作。