Wie kann ich feststellen, wenn in jQuery Mobile auf eine Schaltfläche geklickt wird?

Question

Ich frage mich, ob es eine API gibt, die erkennt, wenn das kollabierbare Element in jQuery mobile geöffnet wird.

https://api.jquerymobile.com/collapsible/

oder müssen wir benutzerdefinierte jQuery Ereignisse verwenden?

Ich meine, es ist ein Verfahren, das Expandieren des zusammenlegbaren Satzes zu erkennen

$(".selector").on("collapsibleexpand", function(event, ui) {}); 

aber keine API Art und Weise zu erkennen, welche der Artikel erweitert worden ...

Answer 1

Sie das nicht finden können, kollabierten div:

$('#myc').on('collapsibleexpand', function(event, ui) { 
    $(this).find('div.ui-collapsible:not(.ui-collapsible-collapsed)')... 
}); 

oder einen Event-Handler anhängen:

$('a.ui-collapsible-heading-toggle').on('tap click', function(e) { 
    .... 
}) 

Das Snippet:

$(document).on("pagecreate", function() { 
 
    $('a.ui-collapsible-heading-toggle').on('tap click', function(e) { 
 
     if ($(this).closest('div.ui-collapsible').is('.ui-collapsible-collapsed')) { 
 
      console.log('tap click: ' + this.childNodes[0].textContent); 
 
     } 
 
    }) 
 

 
    $('#myc').on('collapsibleexpand', function(event, ui) { 
 
     var ele = $(this).find('div.ui-collapsible:not(.ui-collapsible-collapsed)'); 
 
     console.log('collapsibleexpand: ' + ele.find('a.ui-collapsible-heading-toggle').get(0).childNodes[0].textContent); 
 
    }); 
 

 
});

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 

 
<div data-role="content" id="myc"> 
 
    <div data-role="collapsible"> 
 
     <h3>I'm a header1</h3> 
 
     <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
 
    </div> 
 
    <div data-role="collapsible"> 
 
     <h3>I'm a header2</h3> 
 
     <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
 
    </div> 
 
</div>