简体   繁体   中英

How to execute JQuery function on handlebars generated element?

I am developing an Ember Application this includes normal handlebars {{if}} functionality

I am trying to implement accordion function from jqueryUI--- http://jqueryui.com/accordion/

{{if showContent}}  
 <div id="accordion">
      <h3>Section 1</h3>
      <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
      </div>
      <h3>Section 2</h3>
      <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
      </div>
      <h3>Section 3</h3>
      <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>
      </div>
    </div>

{{/if}}

the script function

  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>

is not getting executed as I enclose the div id "accordion" within a {{if}} helper how do i execute the script after the div "accordion" has been loaded to the DOM

UPDATE : A JSBIN of what I actually need http://jsbin.com/wejaba/5/edit

showAccordion:function()
      {
        this.toggleProperty('showAcc');
        Ember.run.next(function() {
        $("#accordion" ).accordion();
         });
      }

I ran the accordion script in ember run next loop everything works fine

http://jsbin.com/bogegizozeca/3/edit

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM