Question

在我的jQueryMobile应用程序中，我使用滑块搜索应用程序的一部分。当滑块打开并且用户将“word to search”写入搜索面板时，找到结果的列表视图将以以下格式打印出来：

<li><a id='$id'>***search result***</a></li>

从php搜索文件加载。单击列表视图的这个li部分，我需要触发onClick函数重定向到另一个页面并创建变量。但是这个onClick触发器没有被选中。

这是搜索init的pannel：

<div data-role="panel" data-theme="b" id="mypanel" data-position="right" data-position-fixed="true" data-display="overlay">
   <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
      <div id="search_results">
        <ul data-role="listview" data-divider-theme="b"  data-inset="true" id="sub_cont"></ul>
      </div>
</div>

发送搜索结果的Php：

if($uname == $check_uname){
echo "<li id='search_r'>" . "<a href='#'>" . $uname . " : " . " " . $fname . " " . $sname . "</a>" . "</li>";
}else{
echo "<li id='search_r'>" . "<a href='#' id='$id' class='s_result'>" . $uname . " : " . " " . $fname . " " . $sname . "</a>" . "</li>";
}

和jQuery：

$("#cc_page").live('pageshow', function(){
   $("#search_r").click(function(){
       var search_r = $('.s_result').attr('id');
       window.location.href = "http://imes.jzpersonal.com/app/userpanel.html#sfpp_page";
   });
});

但仍未触发点击功能。任何相同的经历？有人找到了正确的工作方式吗？

解决方案：

$("#cc_page").ready(function(){
  $("#search_r").live('click', function(){
      search_r = $(this).attr('id');
      window.location.href = "http://imes.jzpersonal.com/app/userpanel.html#sfpp_page";
  });
});

Answer 1

这不起作用。根据您在输入“单词到搜索”时所解释的内容，listview是动态填充的li项目，相同的li项目应该有一个点击事件。

这是一个问题。您正在错误的时刻绑定点击事件。在您的情况下，点击事件是在 pageshow 事件中绑定的，此时listview没有填充搜索结果，并且由于javascript如何工作，未来的li元素不会在它们上面发生点击事件。事件无法追溯绑定。

您应该做的是仅在将元素附加到列表视图后绑定click事件。

来自jQueryMobile“slide panel”，“list view”的触发功能

1 个答案: