Цикл Array и while: сделать уникальный кликабельный

Question

У меня есть массив (через ajax), который выглядит следующим образом:

data[i].id: gives the id of user i
data[i].name: gives the name of user i

Я хочу вывести массив следующим образом:

X Leonardo Da Vinci
X Albert Einstein
X William Shakespeare
...

X - это изображение (x.gif), которое должно быть кликабельно. При щелчке он должен перейти к функции два (), передавая данные параметра [i] .id. Functiontwo откроет диалоговое окно jquery с вопросом «Удалить данные id [i] .id»?

Я знаю, что это не может быть слишком сложно, но я не могу понять это ... Это то, что я до сих пор:

function functionone() {


    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        success : function(data){

            var message = "";
            var i = 0;


            while (i < (data.length - 1))
                            {
                 var myvar = data[i].id;
                 message = message + "<div class=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";


                 $('#somediv').html(message).fadeIn('fast');
                  $("." + data[i].id + "").click(function () {
                  functiontwo(myvar);
                });
                i++;

            }



        }


    });

}

 function functiontwo(id) {
 ...}

Я знаю, почему это не работает. Var я снова и снова пополняется в цикле while. Когда цикл while останавливается, я просто число (в данном случае длина массива), и jquery становится (например):

$("." + data[4].id + "").click(function () {
                  functiontwo(myvar);
                });

, делая кликабельным только последний X.

Как я могу это исправить? Большое спасибо !!!

EDIT:

Это моя вторая функция:

 function functiontwo(id) {

  $("#dialogdelete").dialog("open");

     $('#submitbutton').click(function () {

        $('#submitbutton').hide();
        $('.loading').show();
                    $.ajax({
        type : 'POST',
        url : 'delete.php',
        dataType : 'json',
        data: {
            id : id
        },
        success : function(data){

            var mess = data;
            $('.loading').hide();
            $('#message').html(mess).fadeIn('fast');


        }
    });

    //cancel the submit button default behaviours
    return false;



        });


    }

В delete.php нет ничего особенного, я использовал $ _POST ['id'].

Answer 1

Как я указал в своем комментарии. Проблема в части .click. Или используйте связывание, или используйте класс для всех элементов, и событие щелчка как это $('.classnamehere').live('click',function () { // stuff });

Answer 2

function functionone() {

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        success : function(data){

            var message = "";
            var i = 0;

            while (i < (data.length - 1))
                            {
                 var myvar = data[i].id;
                 message = message + "<div class=\"clickable\" id=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";

                 $('#somediv').html(message).fadeIn('fast');
                i++;
            }
        }
    });
}

$('.clickable').live('click',function () {
    alert($(this).attr('id') + ' this is your ID');
});

Answer 3

Обычный прием - создать отдельную функцию для создания обработчика событий.Отдельная функция получит i в качестве параметра, и сгенерированное событие сможет сохранить эту переменную для себя

make_event_handler(name){
    return function(){
        functiontwo(name);
    };
}

...

$("." + data[i].id + "").click( make_event_handler(myvar) );