Настройка динамических данных в динамических элементах JQuery

Я новичок в JQuery и не имею большого фона в Javascript, так что это могло бы помочь в моих проблемах ... Я пытаюсь динамически генерировать список и связывать события кликов с каждым из динамически сгенерированных элементов. Я могу создать список и успешно привязать события кликов, но затем я столкнулся с камнем преткновения.Настройка динамических данных в динамических элементах JQuery

Мне нужно иметь доступ к конкретным данным о каждом клике, связанным с элементом, который был нажат. Первоначально я хотел просто включить данные в динамическую функцию, которую я создаю, когда я привязываю событие click. Код ниже пытается это сделать, но всякий раз, когда я нажимаю элемент в списке, я получаю только значение моей переменной счетчика (2).

Ясно, что я не понимаю, как создается моя функция кликов. Я прочитал целую кучу пунктов здесь, в SO, что может быть связан с, но я еще не нашел элегантный/правильный способ выполнить это.

Моя тестовая страница:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 

    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript">google.load("jquery", "1.3.2");</script> 

    <script type="text/javascript"> 
function generateList() { 
    var listElement = $('#unsortedList'); 
    var dataArr = new Array(); 
    dataArr["name1"] = "value1"; 
    dataArr["name2"] = "value2"; 

    // Clear any existing HTML 
    listElement.html(''); 

    var i = 0; 
    for(item in dataArr) { 
    listElement.append('<li><div id="item' + i + '">Item ' + i + '</div></li>'); 

    $('#item' + i).click(function() { 
     alert(i); 
     $('#item' + i).html("You clicked item " + i); 
    }); 

    i++; 
    } 
} 

$(document).ready(function(e){ 
    generateList(); 
}); 

    </script> 
    </head> 
    <body> 
    <h1>Test List</h1> 
    <ul id="unsortedList"> 
    </ul> 
    </body> 
</html>

[EDIT] - Моя конечная цель состоит в том, чтобы использовать счетчик значение переменной индекса во внешний массив значений. Я знаю, что в этом примере это немного отключено. Когда вы нажимаете элемент, я хочу вытащить индекс в массив, запустите функцию, которая будет генерировать значение, которое я буду использовать для заполнения другого элемента в том же динамическом элементе списка.

источник

2010-07-09 Quintus

Это работает:

$('#item' + i).click((function(x) { 
      return function(){ 
       $('#item' + x).html("You clicked item " + x); 
      }; 
     })(i));

тестировал здесь: http://jsfiddle.net/uLGxb/

источник

2010-07-09 19:51:19

Здесь вам нужно закрыть здесь. Дайте мне знать, если это работает, поскольку у меня не было возможности проверить это. –

Я вижу эту идею здесь, но я попробовал, и она ничего не изменила. Оба элемента по-прежнему принимают значение «2» как значение x. – Quintus

Думаю, в этом случае «x» будет объектом события (в зависимости от браузера). Если вы хотите удалить параметр «x» из строки «return function (x)», я думаю, что это будет идеально. –

NM - хороший простое решение. конечно, внутренняя секция в равной степени может быть записана как:

 return function(){ 
      $(this).html("You clicked item " + x); 
     };

источник

2010-07-09 21:07:49

Настройка динамических данных в динамических элементах JQuery

ответ

Смежные вопросы