Trying to select li element with JQuery
Question
I am looking to get the text/data contained in between the opening and closing LI tags with JQuery. Below is the code that I am working with. The page as it stands right now will asyncriously go out and query a data base based on what I type into the form. I want to be able to click on on of the LI items and place it in a div labeled #in_attendance. Thanks for all the help in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search').keyup( function() {
var item = $('#search').val();
var html = "";
$.post("./search/attend", { 'search' : item },
function(data){
for(i=0; i<data.bro.length; i++){
options = data.bro[i].first_name, " ", data.bro[i].last_name;
html = html.concat("<li value='", options, "'>", data.bro[i].first_name," ",data.bro[i].last_name,"</li>");
}
document.getElementById('selections').innerHTML = html;
},
"json");
});
$("#selections li").click(function() {
alert($(this).text());
});
});
</script>
</head>
<title></title>
<body>
<?php
echo form_open('search/attend');
echo form_input(array('name' => 'search', 'id' => 'search', 'autocomplete' => 'off'));
echo form_close();
?>
<ul id="selections">
</ul>
<hr />
<div id="in_attendance">
</div>
</body>
3 answers
solution1
2 2012-03-05 20:54:12
The problem you have is your clcik handler is not going to bind to future elements. Use on() method to attach event to parent that is permanently in the page and by passing in the selector you want to handle the element "li" as second argument, clcik will register on "li" only
$("#selections").on('click','li',function() {
alert($(this).text());
});
solution2
0 2012-03-05 20:55:18
In addition to using .on() , you could move the click handler to your $.post() complete event:
$(document).ready(function() {
$('#search').keyup( function() {
var item = $('#search').val();
var html = "";
$.post("./search/attend", { 'search' : item },
function(data){
for(i=0; i<data.bro.length; i++){
options = data.bro[i].first_name, " ", data.bro[i].last_name;
html = html.concat("<li value='", options, "'>", data.bro[i].first_name," ",data.bro[i].last_name,"</li>");
}
document.getElementById('selections').innerHTML = html;
$("#selections li").click(function() {
alert($(this).text());
});
},
"json");
});
});
solution3
0 2012-03-05 20:55:40
You need to keep your event binded. See below for sample.
$('#selections li').live('click', function() {
alert($(this).text());
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.