framework 7 onclick event bind not working

Question

I'm using framework7.io. I'm using their framework events and functioning but the onclick event is not bind with their page event pageInit.

I'm try to access form Data and convert it to json using formTOJSON as shown below.

JS part

//on page in it if page load via ajax 
$$(document).on('pageInit', function() {

    /*========query form=======*/

    var queryForm = app.formToJSON('#query-form');
    $$('#query-submit').on('click', function () {
       console.log(JSON.stringify(queryForm));
    });

});

HTML part

<form id="query-form">
                    <div class="color-error" id="formErrorField" style="display: none;"></div>
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <textarea name="question" placeholder="Type Here!"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <br/>
                    <a href="#" class="button button-fill" id="query-submit">Submit</a>
                </form>

The same code is working for a different page load (non-ajax).

Answer 1

Actually binding seems fine in your code.
Keep formToJSON code inside click event handle block try this:

$$(document).on('pageInit', function() {
    var queryForm = null;
    $$('#query-submit').on('click', function () {
     queryForm = app.formToJSON('#query-form');
       console.log(JSON.stringify(queryForm));
    });
});

Because when PageInit is happening your queryForm variable is empty according to your code.After filling the form you want to get value.So keep inside the click event handler. Hope this helps.