OnsenUI - 用jQuery / JS选择元素（ons-template问题？） [英] OnsenUI - Select element with jQuery/JS (ons-template issue?)

问题描述

我是OnsenUI的全新品牌，到目前为止我非常享受这一切的外观和感觉。
我使用普通的JS和一个小的jQuery。

我的问题是：
我不能选择任何东西（ID，Class等等） ）使用JS或jQuery时，我使用ons模板。

当我删除这个我没有任何问题，buuuut我使用ons-splitter作为我的导航方法。 （注：我也试过标签等）

有什么我做错了吗？

 < ONS-分离器> 
< ons-splitter-side id =menuside =leftwidth =220pxcollapse swipeable> 
< ons-page> 
侧边栏内容等... 
< / ons-page> 
< / ons-splitter-side> 
 < / ons-splitter> 
 
 <！ - 我想用jQuery选择ons-list-item #book  - > 
< ons-template id =main.html> 
< ons-page> 
< ons-toolbar> 
< div class =left> 
< ons-toolbar-button onclick =fn.open（）> 
< ons-icon icon =md-menu>< / ons-icon> 
< / ons-toolbar-button> 
< / div> 
< div class =center top-bar-title>标题< / div> 
< / ons-toolbar> 
< ons-list> 
< ons-list-item id =book>图书< / ons-list-item> 
< / ons-list> 
< / ons-page> 
< / ons-template> 
 
< script> 
 $（＃book）。click（function（）{
 alert（TEST）; 
}）; 
< / script> 
  

感谢您的帮助！

解决方案

这里的问题是，当脚本执行时，模板仍然没有加载到splitter-content中，因此没有元素的id为book。 b
$ b

解决方案是在main.html页面的初始化中添加事件监听器。这样，您可以确定模板已加载，您可以选择该模板上存在的任何ID。

注意：确保在< ons-page> 元素上添加一个ID。

如何添加侦听器或调用函数用于页面的初始化：

 < ons-splitter> 
< ons-splitter-side id =menuside =leftwidth =220pxcollapse swipeable> 
< ons-page> 
侧边栏内容等... 
< / ons-page> 
< / ons-splitter-side> 
 < / ons-splitter> 
 
 <！ - 我想用jQuery选择ons-list-item #book  - > 
< ons-template id =main.html> 
< ons-page id =main> 
< ons-toolbar> 
< div class =left> 
< ons-toolbar-button onclick =fn.open（）tappable> 
< ons-icon icon =md-menu>< / ons-icon> 
< / ons-toolbar-button> 
< / div> 
< div class =center top-bar-title>标题< / div> 
< / ons-toolbar> 
< ons-list> 
< ons-list-item id =booktappable> Books< / ons-list-item> 
< / ons-list> 
< / ons-page> 
< / ons-template> 
 
< script> 
 
 document.addEventListener（init，function（event）{
 
 if（event.target =main）{
 $（＃book ）.click（function（）{
 alert（TEST）; 
}）; 
} 
}）; 
 
< / script> 
  

I’m brand new to OnsenUI and so far I’m really enjoying the look and feel of it all. I’m using it with plain JS and a little jQuery.

My issue is: I cannot select anything (ID, Class etc.) using JS or jQuery while I’m using ons-template.

When I remove this I don’t have any issues, buuuut I’m using ons-splitter as my navigation method. (note: I've also tried tabs etc)

Is there something I’m doing wrong?

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
    sidebar content etc...
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="main.html"></ons-splitter-content>
</ons-splitter>

<!-- I want to select the ons-list-item #book with jQuery -->
  <ons-template id="main.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center top-bar-title">Title</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item id="book">Books</ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

<script>   
    $("#book").click(function(){
        alert("TEST");
    });  
</script>

Thanks for any help!

解决方案

The problem here is that when the script is being executed, the template is still not loaded into the splitter-content, thus there is no element with the id "book".

The solution is to add the event listener on the initialization of the main.html page. That way, you are sure that the template is loaded and you can select any of the ids present on that template.

NOTE: Make sure to add an id on the <ons-page> element.

How to add a listener or call a function on the initialization of a page:

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
    sidebar content etc...
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="main.html"></ons-splitter-content>
</ons-splitter>

<!-- I want to select the ons-list-item #book with jQuery -->
  <ons-template id="main.html">
    <ons-page id="main">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()" tappable>
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center top-bar-title">Title</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item id="book" tappable>Books</ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

<script>

    document.addEventListener("init",function(event){

        if(event.target="main"){
               $("#book").click(function(){
                    alert("TEST");
                });  
        }
    });

</script>

这篇关于OnsenUI - 用jQuery / JS选择元素（ons-template问题？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！