On click function "div" is not apending

Question

I am working with searching string from database and selected string appending to the text box

I can get the search results from database and i can append the result below the textbox.

But my problem is onclick of particular result I can't get the "id" of appended result

My code looks like this..

<span id="new">
    <input id="addSearch" type="text" width="50px"/>
</span>

<div id="append" style="margin-top: -11px;width: 149px;"></div>

<script type="text/javascript">

$(function(){      
  $("#addSearch").keyup(function() {    
    var v = $('#addSearch').val();
    $.getJSON('http://localhost/api/getresult/?q='+v, function(data){
      $('#append').html('');
        $.each(data, function (key,value){
           $('<div  id='+value["id"]+' class="searchResult">  
                   '+value["name"]+' 
                 </div>').appendTo($('#append'));
         });
     });    
  });    
});
$('.searchResult').click(function(){
  alert($(this).attr("id"));
});

palaѕн · Accepted Answer · 2013-01-02 10:08:24Z

2

Your key up method is correct, you just need to modify the click event like this:

$(document).on('click', '.searchResult', function(e) {
    alert($(this).attr('id'));
});

answered Jan 2, 2013 at 10:08

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mattias Buelens Over a year ago

Note that you can limit the scope of the event handler by binding it to $('#append') instead of $(document).

Mattias Buelens · Accepted Answer · 2013-01-02 10:13:06Z

As Adarsh Raj noted, you are not binding the click handler on the .searchResult elements you append in the AJAX callback. jQuery collections are not "live" and as such, the event handler is directly bound on the matching DOM elements at the time of the call.

However, instead of manually binding the handler to each inserted element, you should use a delegated event handler on a parent element:

$('#append').on('click', '.searchResult', function(){
    alert($(this).attr("id"));
});

This requires that the #append element is in the DOM at the time of the call, but any .searchResult elements inserted later will be able to trigger the event handler through event propagation. Another advantage is that there is only one event handler handling the click event for all .searchResult elements, instead of having an event handler for each individual element.

Jobert Enamno · Accepted Answer · 2013-01-02 09:48:37Z

0

Try

var a = $('<div  id='+value["id"]+' class="searchResult"> '+value["name"]+' </div>');
$('#append').append(a);

instead of your approach below
var a = $('<div  id='+value["id"]+' class="searchResult">  
                       '+value["name"]+' </div>').appendTo($('#append'));

answered Jan 2, 2013 at 9:48

Jobert Enamno

4,5118 gold badges44 silver badges66 bronze badges

Comments

Arindam · Accepted Answer · 2013-01-02 09:56:31Z

0

you dont need the var a

$(stuff).appendTo(selector) is fine.

Though that is not the solution, but one observation.

So assuming your response from the back end gives a JSON like so: { id: 123, name: "name" }

Your iteration in the function $.each(data, function(k,v) {

v itself has the desired values. value["id"] is wrong and tries to access the property id of the key. So you don't need the iteration over the JSON, you can simply access its properties, if you know what they are.

Try this:

$('<div id=' + data["id"] + 'class="searchResult">' + data["name"] + ...

edited Jan 2, 2013 at 9:56

answered Jan 2, 2013 at 9:50

Arindam

9981 gold badge8 silver badges22 bronze badges

4 Comments

Arindam Over a year ago

@abhi try the solution above. Don't iterate, just use data. If your JSON structure is something else, you might have to share that, so that I can provide an answer.

Mattias Buelens Over a year ago

It'd help if we had a sample of the produced JSON. However, I believe he intends it to be an array of {key:..., value:...} pairs, so iterating makes sense.

Arindam Over a year ago

@MattiasBuelens, I am sure. Hence I'm asking for the sample JSON. Without that, any answer, even mine would be futile :-)

Abhi Over a year ago

@Arindam i am getting json result as [{"id":"1","name":"new_challenge1 by abhi"},{"id":"2","name":"challenge2 by abhi"}]

Adarsh Raj · Accepted Answer · 2013-01-02 09:59:36Z

0

your are trying to bind the click function before the element came to dom. So do bind the event inside your loop

$(function(){      
  $("#addSearch").keyup(function() {    
    var v = $('#addSearch').val();
   $.getJSON('http://localhost/api/getresult/?q='+v, function(data){
     $('#append').html('');
      $.each(data, function (key,value){
         $('<div  id='+value["id"]+' class="searchResult">  
               '+value["name"]+' 
             </div>').appendTo($('#append'));

          bindClick();
       });
   });    
});    
});
function bindClick(){
    $('.searchResult').click(function(){
      alert($(this).attr("id"));
   });
 }

answered Jan 2, 2013 at 9:59

Adarsh Raj

3011 silver badge8 bronze badges

Comments

user1885024 · Accepted Answer · 2013-01-02 10:43:18Z

0

try like this,

$('.searchResult').live('click', function() {

alert($(this).attr("id"));

});

answered Jan 2, 2013 at 10:43

user1885024

491 silver badge6 bronze badges

3 Comments

palaѕн Over a year ago

@abhi: Go through this before using live. on-vs-live-review

palaѕн Over a year ago

jQuery v.1.7 onwards the .live() method is apparently deprecated.

Mattias Buelens Over a year ago

.live() and .delegate() have been superseded by on(). Their usage is discouraged for new code.

Collectives™ on Stack Overflow

On click function "div" is not apending

6 Answers 6

1 Comment

Comments

Comments

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related