0

動的リストを生成するコードが 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>

要素をクリックするとWebページが開くようになりました。URL は、クリックされた要素とその親の組み合わせになります。

動的であるためIDを持たない場合、jQueryでonClickイベントをどのように添付すればよいですか?

前もって感謝します。

4

1 に答える 1

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>

于 2016-03-09T09:56:43.780 に答える