Jquery don't detect a click after showing search results

Question

I have a small problem with Jquery click. On page load we display some things from a database. The startup code I mean is placed in the same file where the html is (This will be removed when the user searches for the first time because the div where are the list-item are in wil be cleared after searching to make place for the search results).
When you click on one of the items you get a popup menu with some info.

Now the problem:
On the page we also have a search bar that searches things in a database. When you press search you get a list of search result. It is the same html code as on the page load but this time Jquery don't detect a click.

html:

<div class="list-item" data-singer= <?php echo '"'.$name.'"' ?> >
        <div class="row">
                <div class="name"><?php echo $name ?></div>
                <div class="tags">
                        <div class="tag"><?php echo $tag ?></div>
                </div>
        </div>
    <div class="row">
            other info
    </div>
</div>

Jquery:

$('.list-item').click(function(){
  alert();
  name = $(this).data('singer');
  name_modified = name.replace(" ", "_");
  $(name_modified).ready(function(){
    $('.popup > .content').empty();
    $('.popup > .content').load('singers/' + name_modified + '.xml');
    $('.popup').slideDown(500);
  });
});

There is also another problem with the js code but I am already happy when I fix this problem. When you need more information leave a comment and I will add it.

And a message to downvoters. Leave a comment please.

did you put your jquery code shown here in document.ready function??? — The Guest, Apr 13 '15 at 18:05
remove everything in click except alert() does it work? also what is you markup for .list-item — btevfik, Apr 13 '15 at 18:05
try .on() for binding events for elements which have not been created till the time js is parsed. — Nielarshi, Apr 13 '15 at 18:07
where is the search bar in the code cant see ? is this the full code? — Shelly, Apr 13 '15 at 18:10
Solved. I needed `.on()`. I already tried something with on but that didn't work but this was the solution: `$('#content').on('click', '.list-item', function(){` — Vinc199789, Apr 13 '15 at 18:10

score 1 · Accepted Answer · answered Apr 13 '15 at 18:05

1

You have to use event delegation, I do not know the id of your container where you will load the items, but you could replace it afterwards in my example:

$('#parent').on('click', '.list-item', function(){
  alert();
  name = $(this).data('singer');
  name_modified = name.replace(" ", "_");
  $(name_modified).ready(function(){
    $('.popup > .content').empty();
    $('.popup > .content').load('singers/' + name_modified + '.xml');
    $('.popup').slideDown(500);
  });
});

That way your #parent will be delegating the click event to all childs even if they are dinamically loaded.

answered Apr 13 '15 at 18:05

taxicala

21,408
7
37
66

Thanks that works. Strange I tried `.on()` already but I did `$('.list-item').on('click',function(){ })` but that didn't work. – Vinc199789 Apr 13 '15 at 18:08
Thats because you are binding the event to the items, check the order of the parameters passed to the .on method. The way i've done it, the event is binded to #parent, and that #parent is delegating the event to the given childs (.list-item) – taxicala Apr 13 '15 at 18:10

score 1 · Answer 2 · answered Apr 13 '15 at 18:05

1

Because the click event is never bound to the elements. You need to wither bind the elements when the new content is loaded or use event delegation.

$(document).on("click", '.list-item', function(){ ...

answered Apr 13 '15 at 18:05

epascarello

204,599
20
195
236

picus · Answer 3 · 2015-04-13T18:07:00.370

Does any of the JS work when the page is reloaded? If not, then you may have another error in your JS code which is unrelated to this code which is preventing the item from firing.

Also, you should try using ".on". This will allow the JS to listen on items added to the DOM:

$('body').on("click", '.list-item', function(){
  alert();
  name = $(this).data('singer');
  name_modified = name.replace(" ", "_");
  $(name_modified).ready(function(){
    $('.popup > .content').empty();
    $('.popup > .content').load('singers/' + name_modified + '.xml');
    $('.popup').slideDown(500);
  });
});

Jquery don't detect a click after showing search results

3 Answers3