getting value inside li of ajax response

Question

i am trying to make search function i need to get value inside li which is in ajax response

my html page is

<form role="form" action="<?php echo base_url();?>comparison/selCourse" method="post" id="selAll">
    <h4>Select College TO Compare </h4>
    <input type="text" class="form-control" id="compFirst" name="compFirst">
    <ul class="search-open" style="display: block;colour:#fff;" id="display">
    </ul>
    <!-- End Display Drop Down For Select College -->
    <!-- Begin Display Drop Down For Select Course -->
    <div class="col-md-14" id="selectCourseFirst">
        <h6> Select Course You Are Interested</h6>
        <div class="margin-bottom-40"></div>
    </div>
    <!-- End Display Drop Down For Select Course -->
</form>

my jquery

$(document).ready(function() {
    $("#compFirst").keypress(function() {
        var option = $('#compFirst').val();
        $('#selectCourseFirst').show();
        $.ajax({
            url: "http://localhost/ci/comparison/selCollege",
            data: {
                insId: option
            },
            type: "POST",
            success: function(result) {
                $('#display').html(result);
            }
        });
    });
});

controller have fuction named

public function selCollege() {
    $insId = htmlspecialchars($this - > input - > post('insId'));
    $this - > load - > model('comparisonModel');
    $selCourse = $this - > comparisonModel - > selCollege($insId);
    foreach($selCourse as $key => $value) {
        echo '<li>'.$value['name'].
        '</li>';
    }
}

when i try select value inside the li using jquery like

$('ul.search-open li').click(function(){
    alert('hi');
});

i dont get any response click function doesn't work

please help

delegate the event. `$('document').on('click','ul.search-open li',function(){})` — guradio, Aug 26 '16 at 05:57

score 0 · Accepted Answer · answered Aug 26 '16 at 05:56

0

If you create html dynamically you should use something like that to detect 'click' function ;

$(document).on('click', 'ul.search-open li', function () {
    alert('hi');
});

Hope this helps.

answered Aug 26 '16 at 05:56

Qsprec

265
3
11

yeah it worked fine – shahid khan Aug 26 '16 at 06:06
how can i get value inside li – shahid khan Aug 26 '16 at 06:06
You can use $(this).text(); to get text of 'li' element – Qsprec Aug 26 '16 at 06:09
that worked excellent – shahid khan Aug 26 '16 at 06:23

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

for Dynamic elements you should use on

$(document).on('click', 'ul.search-open li', function () {
    alert('hi');
});

HERE is the reference.

edited May 23 '17 at 10:29

Community

1
1

answered Aug 26 '16 at 05:58

Sarath

2,318
1
12
24

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

you have to find the particular li then the event handeler will work.

$('ul.search-open li').each(function(index){
      $(this).on("click", function(){
       alert($(this));
    });
   });

you could refer jQuery '.each' and attaching '.click' event

edited May 23 '17 at 12:26

Community

1
1

answered Aug 26 '16 at 06:00

`$('ul.search-open li').on("click",` is faster but you need to look into event delegation. See the other answers. Yours is not correct – mplungjan Aug 26 '16 at 06:02

getting value inside li of ajax response

3 Answers3