Problem using appendTo in jQuery

Question

Why in the code following after click on '.list_name p a' to appendTo is several result?

like:
all result is:salsh، salasi، salaso، salal
when click on- salshh -> displaying(.appendTo) -> salsh، salasi، salaso، salal
when click on- salasi -> displaying(.appendTo) ->salasi، salaso، salal
when click on- salaso -> displaying(.appendTo) ->salaso، salal
when click on - salal -> displaying(.appendTo) ->salal

I want append to only value that clicked, no several value.

js:

    $('.auto_complete').keyup(function () {
            var id = '#' + this.id;
            var alt = $(id).attr('alt'); var id = $(this).attr('id'); var name = $(this).attr('name');
            var url = alt + id + '/' + name;
        var dataObj = $(this).closest('form').serialize();
        $.ajax({
            type: "POST",
            url: url,
            data: dataObj,
            cache: false,
            dataType: 'json',
            success: function (data) {
                $(".list_name").show().html('');            
                $.each(data.name, function(a,b){
                    $(".list_name").append('<p><a href="" id="result">' + b + '</a></p>');

////////////////////here///////////////////                        
$('.list_name p a').click( function(event) {
                            event.preventDefault();
                            $('<b>' + b + '، </b><input type="text" name="hotel[]" value="' + b + '" style="border: none; display: none;" />').appendTo('.auto_box span');
                        })
///////////////////////////////////////////

                });
                if($('.auto_complete').val()==''){
                    $(".list_name p").hide().remove()
                }
                $('body').click(function(){
                        $(".list_name p").hide().remove();
                        $('.auto_complete').val('');
                    });
            },
            "error": function (x, y, z) {
                // callback to run if an error occurs
                alert("An error has occured:\n" + x + "\n" + y + "\n" + z);
            }
            });    
        });

You should check the live() method out, so that you don't have to manually add an event listener to each element you add. api.jquery.com/live — Alessandro Vendruscolo
– Alessandro Vendruscolo, Commented Jul 15, 2011 at 14:21

boulaycote · Accepted Answer · 2011-07-15 14:28:56Z

1

In your $.each loop you are selecting all elements on every loop. And binding multiple click handles on the same elements again and again.

$('.list_name p a').click( function(event) { ... } );

You should try something like :

var link = $('<p><a href="" id="result">' + b + '</a></p>');
link.click(function(e){ ... });
link.appendTo($(".list_name"));

answered Jul 15, 2011 at 14:28

boulaycote

6021 gold badge6 silver badges19 bronze badges

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

Comments

J. Ed · Accepted Answer · 2011-07-15 14:22:42Z

0

your selector select all elements with class auto_box span.
if you want to get the item that was clicked, use $(this):

$('<b>' + b + '، </b><input type="text" name="hotel[]" value="' + b + '" style="border: none; display: none;" />').appendTo($(this));

answered Jul 15, 2011 at 14:22

J. Ed

6,7625 gold badges41 silver badges57 bronze badges

Collectives™ on Stack Overflow

Problem using appendTo in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related