Открыть ссылку при нажатии на динамический объект в списке

Question

У меня есть код в руле, который генерирует динамический список.

<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 будет представлять собой комбинацию элемента, по которому щелкнули, и его родительского элемента.

Не имея идентификатора из-за его динамичности, как я должен прикрепить событие onClick в jQuery.

Заранее спасибо.

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