Та не, кнопка инфо одна единственная и на ней единственный обработчик - клик.
// SCRIPT2
$( '#infoBtn' ).click(function(){
var someInfo = ''; //данные, связанные с нажатым элементом в левом блоке
$('#infoDiv').html('<div id=\'Info\'></div>');
$('#Info').html(someInfo);
$( '#Info' ).dialog({
draggable: true,
modal: true,
width: 650,
minWidth: 500,
buttons: {
Ok: function() { $( this ).dialog( "close" ); }
},
show: {
effect: "puff",
duration: 400,
},
hide: {
effect: "puff",
duration: 400,
},
close: function(event) {
$( '.ui-dialog' ).empty();
$( '#Info' ).empty();
},
});
});
При каждом нажатии на элемент списка, див со всем содержимым удаляется и пересоздается (как это показано в предыдущем коде). Таким образом несколько кнопок "инфо" на странице быть не может.
А если открепить обработчик с элемента списка при нажатии на него, как быть, если пользователь захочет вернуться на тот элемент, на который прежде кликал? Обработчик то будет уже отключен...
Вообще проблема, как мне кажется, не в самой кнопке "инфо". Беда кроется где-то на этапе аякс-запроса, но ума не приложу где и почему это происходит. И главное - как отследить.
Попробую изобразить.
В левой части страницы, обведенное зелёным, находится блок со списком (не список html, а просто сгенерированные циклом дивы. Не суть важно). Справа от него, обведённое красным - див, генерируемый в результате нажатия на один из элементов в левом блоке. При нажатии на элемент в левом блоке, выполняется SCRIPT1 (в первом сообщении) - правый блок удаляется со всем содержимым и создаётся новый с соответствующими нажатому элементу данными, и на этом сгенерированном блоке есть кнопка, при нажатии на которую выполняется SCRIPT2 (выше в посте) - выводятся в модальном окне некоторые данные, связанные с нажатым элементом в левом блоке. Загвоздка в том что понажимав несколько раз на разные элементы в левом блоке и потом единожды нажав на кнопку "инфо", отобразится модалка не последнего нажатого элемента в левом блоке, а каждого нажатого в порядке их нажатия.