jQueryMobile“滑动面板”、“列表视图”的触发功能

Question

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

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

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

这是带有搜索初始化的面板：

<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

这是行不通的。根据您在输入“要搜索的单词”时所解释的内容，列表视图会动态填充 li 项目，同样的 li 项目应该有一个点击事件。

这里有个问题。您在错误的时刻绑定了单击事件。在您的情况下，单击事件在 pageshow 事件中绑定，此时列表视图未填充搜索结果，并且由于 javascript 的工作方式，未来的 li 元素不会在它们上产生单击事件。事件不能追溯绑定。

您应该做的是仅在元素被附加到列表视图之后才绑定点击事件。