如何在YUI中使用动态加载的元素

时间:2014-01-12 08:47:48

标签: yui

我目前正在尝试使用YUI3集成spring mvc app。我能够通过YUI在jsp中使用静态href调用Spring Controller,但是在尝试调用动态生成的href时不会调用脚本。

<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
                        <script>
                        YUI().use('io-form', 'json','datatable','node','tabview',function(Y) {
                        Y.all('#nav a').on('click', function (ev) {
                                ev.preventDefault();
                                //main.load(ev.target.get('href'), '#content');
                                var href = ev.target.get('href');
                                var url = href.substring(0,href.indexOf('#'));
                                var idw = href.substring(href.indexOf('#')+1,href.length);
                                Y.io(url, {
                                    method: 'GET',
                                    on: {
                                    complete: function(id, response) {
                                    answer = Y.JSON.parse(response.responseText);
                                    Y.log(answer);
                                    var main = Y.one('#'+idw); 
                                    var node = main.all('li');

                                    if(node.size()===0){
                                    Y.Object.each(answer, function(item, index){

                                            main.append("<li id='"+item+"' class='api-list-item class'><a href='/YUI-2-Spring/getContactDetails/"+item+".html#"+item+"'>"+item+"</a></li>");


                                    });
                                    }
                                    }

                                    }
                                    });

                                });
                        //To call controller on clickin of dynamic links
                                Y.all('#api-Types a').on('click', function (ev) {
                                ev.preventDefault();
                                //main.load(ev.target.get('href'), '#content');
                                var href = ev.target.get('href');

                                var neturl = href.substring(0,href.indexOf('#'));
                                var studId= href.substring(href.indexOf('#')+1,href.length); 
                                Y.io(neturl, {
                                    method: 'GET',
                                    on: {
                                    complete: function(id, response) {
                                    answer = Y.JSON.parse(response.responseText);
                                    Y.log(answer);
                                    var main = Y.one('#api-everything'); 
                                    var node = main.all('li');
                                    if(node.size()===0){
                                    Y.Object.each(answer, function(item, index){

                                            main.append("<li id='"+item+"' class='module-class'><a href='/YUI-2-Spring/getPersonalDetails/"+item+"/"+contId+"'</a>"+item+"</li>");


                                    });
                                    }
                                    }

                                    }
                                    });

                                });
                        });
                        </script>

我用于在tabview选择上调用控制器的第一个脚本。基于此我在<ul id="api-Types" class="apis modules"></ul>字段内创建了一个带有href的String列表。在下一个脚本中,我正在尝试调用生成的链接,但脚本没有被执行。

<div class="yui3-u-1-4">
                        <div id="docs-sidebar" class="sidebar apidocs">
                            <div id="api-list">
                        <h2 class="off-left">APIs</h2>
                        <div id="api-tabview" class="yui3-tabview-content">
                            <ul id="nav" class="tabs">
                                <li class="yui3-tab yui3-widget yui3-tab-selected"><a href="/YUI-2-Spring/getAllElements.html#api-elements">Elements</a></li>
                                <li class="yui3-tab yui3-widget"><a href="/YUI-2-Spring/getContactDetails.html#api-Types">Contact Details</a></li>
                                <li class="yui3-tab yui3-widget"><a href="#api-everything">All</a></li>
                            </ul>



                            <div id="yui3-tabview-panel">

                                 <ul id="api-elements" class="apis classes">
                                 <input type="search" id="api-filter" placeholder="Type to filter APIs">
                                 </ul>
                                  <ul id="api-Types" class="apis modules">
                                  <input type="search" id="api-filter" placeholder="Type to filter APIs"></ul>

                                     <ul id="api-everything" class="apis search">
                                     <input type="search" id="api-filter" placeholder="Type to filter APIs">
                                        <li class="message">
                                            Begin typing in the search box above to see results.
                                        </li>
                                    </ul>

                            </div>
                        </div>
                    </div>

这是从viewsource生成的动态列表:

 <ul id="api-Types" class="apis modules yui3-tab-panel yui3-tab-panel-selected" role="tabpanel" aria-labelledby="yui_3_14_1_1_1389513296688_62">
                      <input type="search" id="api-filter" placeholder="Type to filter APIs"><li  class="api-list-item class"><a href="/YUI-2-Spring/getContactDetails/ABC.html#ABC" id="yui_3_14_1_1_1389513296688_227">ABC</a></li><li id="BCD" class="api-list-item class"><a href="/YUI-2-Spring/getContactDetails/BCD.html#BCD">BCD</a></li><li id="CDE" class="api-list-item class"><a href="/YUI-2-Spring/getContactDetails/CDE.html#CDE">CDE</a></li><li id="DEF" class="api-list-item class"><a href="/YUI-2-Spring/getContactDetails/DEF.html#DEF">DEF</a></li><li id="EFG" class="api-list-item class"><a href="/YUI-2-Spring/getContactDetails/EFG.html#EFG">EFG</a></li><li id="FGH" class="api-list-item class"><a href="/YUI-2-Spring/getContactDetails/FGH.html#FGH">FGH</a></li></ul>

当我点击链接时,不是调用脚本,而是通过Dispatcher servlet调用我的控制器。         任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

要在DOM上动态添加的元素上绑定事件,您应该使用'delegate'来绑定事件而不是'on'。它会起作用。