从jQueryMobile“幻灯片面板”、“列表视图”触发功能

In my jQueryMobile app I'm using slider for search part of application. When slider is opened and user writes "word to search" into search panel, list view of found results is printed out in format:

在我的jQueryMobile应用程序中，我使用滑动条来搜索应用程序的一部分。当滑动条被打开，用户在搜索面板中写入“搜索词”时，列表视图会以格式打印出来:

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

its loaded from php search file. On click of this li part of list view I need to trigger onClick function redirecting into another page and create variable. But this onClick trigger is not being picked.

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

This is pannel with search init:

这是带有search 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 which sends search result:

发送搜索结果的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>";
}

and jQuery:

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";
   });
});

but still click function is not being triggered. Anyone same experience? Anyone found a correct working way?

但是仍然点击函数没有被触发。任何相同的经验吗?有人找到正确的工作方式了吗?

Solution:

解决方案:

$("#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";
  });
});

1 个解决方案

#1

This is not going to work. From what you have explained when you enter "word to search" listview is dynamically populated with li items, same li items that should have a click event on them.

这是行不通的。从您在输入“word to search”列表时所解释的内容，可以动态地使用li条目，相同的li条目，应该在它们上有一个click事件。

Here's a problem. You are binding a click event in the wrong moment. In your case click event is bind at a pageshow event, and at this point listview is not populated with search results and because of how javascript works future li elements are not going to have a click event on them. Event can not be bind retroactively.

这是一个问题。您在错误的时刻绑定单击事件。在您的案例中，单击事件在一个页面上绑定，在这个点上，listview没有被搜索结果填充，并且由于javascript的工作方式，li元素不会在它们上有一个click事件。事件不能追溯回绑定。

What you should do is to bind a click event only after elements have been appended to a listview.

您应该做的是只在元素被添加到listview后绑定单击事件。

#1