Question

I have several popups with multiple input fields. I want to highlight the FIRSTinput element of all my popups, and I DO NOT want to use ids:

my code:

function initPopups(){
    $('*[id*=Popup]').each(function() {
        $(this).on({
                    // disables the auto close on outer clicks
            popupbeforeposition: function () {
                // removes all handlers from the 'background'(-layer.class) of the popup
                $('.ui-popup-screen').off();
            },
                    // SHOULD highlight the first textfield after popup opened
            popupafteropen:function(){
                console.log("OPENED");
                   $('form:first *:input[type!=hidden]:first').focus();
            }
        });
    });

Here is the html of one popup:

<div data-role="popup" id="create_stationPopup" class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext"
               class="ui-btn-right">Close</a>
            <form>
            <input type="text" name="name" id="station_input_title" value="" data-mini="true" placeholder="Titel der Station" />
            <input type="text" name="name" id="station_input_number" value="" data-mini="true" placeholder="Nummer der Station"/>
            <textarea name="textarea" id="station_input_text" placeholder="Beschreibe diese Station"></textarea>
           </form>
            <a href="#create_stationQuestionPopup"  data-rel="popup" data-role="button" data-theme="c" id="createWave_questionBtn" >Frage
                hinzufügen</a>
            <a id="createWave_stationSaveBtn" data-role="button" data-theme="c">Station
                speichern</a>
        </div>

My code only highlights THE FIRST input field in my HTML file, not the first input field in all popups (which are in static html)

Answer 1

with the help of @Trufa I fixed it the following way:

function initPopups(){
    $('*[id*=Popup]').each(function() {
        $(this).on({
            popupbeforeposition: function () {
                // removes all handlers from the 'background'(-layer.class) of the popup
                $('.ui-popup-screen').off();

            },
            popupafteropen:function(){
                   $('.ui-popup-active *:input[type!=hidden]:first').focus();
              }
        });
    });
}

Every popup gets the class .ui-popup-active when it is on screen, so simply use that and highlight the first input field 🙂