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:
<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.
This is pannel with search init:
<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:
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:
$("#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";
});
});
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.
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.
What you should do is to bind a click event only after elements have been appended to a listview.