Is it possible to perform OnsenUI screen transition from jQuery?

This is my first time to ask a question.Thank you for your cooperation.

The question is about implementing a hybrid application using OnsenUI and jQuery, so how can I activate pushPage for OnsenUI's ons.navigator when I handle click events with On of Li elements dynamically created by jQuery?

As for the page configuration, we use the OnsenUI sliding menu, so please write the ons-sliding-menu tag in index.html as follows.

<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay"max-slide-distance="200px">

In addition, ons.ready describes the required actions for each main-page set up when selecting each menu in the same page.

Below is one of the pages that is set when selecting the sliding menu, and we are trying to pushPage OnsenUI from click events for li elements dynamically generated by jQuery to display the data obtained by Ajax communication.

module.controller('ctrl_search.html', function($scope){
  ons.ready(function(){
    $(".cs-ulh").on('click', 'li', function(){
      myNavigator.pushPage('g_search_detail.html');
    });
  });
});

Simply writing pushPage does not work for the target as described above.

What should we do to make this happen?

■ index.html

<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay"max-slide-distance="200px">
</ons-sliding-menu>

module.controller('ctrl_search.html', function($scope){
  ons.ready(function(){

    // Dynamic li element generation after AJAX communication
    function ajaxRequest(reqPrm){
      varrcount = 0;
      $.ajax({
        }, success:function(json){
          for (vari=0;i<json.length;i++){
            $(".cs-ulh").append(add li element);
          }
      });
    }

    // Dynamically generated li click to search.detail.html
    $(".cs-ulh").on('click', 'li', function(){
      myNavigator.pushPage('g_search_detail.html');
    });

  });
});

■home.html

<ons-navigator var="myNavigator">
  <ons-pageng-controller="ctrl_home.html">
    <ons-toolbar>/ons-toolbar>
  </ons-page>
</ons-navigator>

■search.html

<ons-pageing-controller="ctrl_search.html">
  <ons-toolbar>...</ons-toolbar>
  <ul class="cs-ulh"></ul>
</ons-page>

It looks like this when you extract only the relevant parts.
In the sliding menu described in index.html,
Specify home.html as the main-page.
Set var=myNavigator for ons-navigator in home.html.
Class specified as ul element in search.html.
And in index.html, after Ajax communication, the li element is dynamically generated and
PushPage is running when the dynamic li element is clicked.
It still doesn't work, but what's the problem?
Please let me know.