单击列表中的动态对象时打开链接

Question

我在Handlebars中有一个生成动态列表的代码。

<ul id="expList">
{{#each hierarchy}}
    <li class="index">{{@key}}
        <ul>
            {{#each this}}
                <li class="country">{{@key}}
                    <ul>
                        {{#each this}}
                            <li class="cluster">{{@key}}
                                <ul>
                                    {{#each this}}
                                        <li class="farm">{{@key}}
                                        </li>
                                    {{/each}}
                                </ul>
                            </li>
                        {{/each}}
                    </ul>
                </li>
            {{/each}}
        </ul>
    </li>
{{/each}}
</ul>

现在我想在点击元素时打开一个网页。该URL将是单击的元素及其父元素的组合。

由于是动态的，没有id，我应该如何在jQuery中附加onClick事件。

提前致谢。

Answer 1

您可以使用on()：http://api.jquery.com/on/

$(document).on("click", ".cluster", function(e) {
   // you can get your clicked element here
   console.log("event"); 
});

修改

对于农场来说：

$(document).ready(function() {
   $(document).on("click", ".farm", function(e) {
     var idfarm= $(this).attr('data-id');
     var idcluster= $(this).parent().parent().attr('data-id');
     
     $("#result").html(idfarm +"|"+ idcluster);
     console.log("event"); 
     
     // This cant work in stackoverflow sandbox allow-popups permission is not set
     window.open('http://localhost:8000?farm='+idfarm+'&cluster='+idcluster,'GoogleWindow', 'width=800, height=600');
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="cluster" data-id="key cluster">key cluster
     <ul>      
       <li class="farm" data-id="key farm">Key farm</li>
       </ul>
   </li>
   
<div id="result"></div>