ОК, странная проблема здесь.Невозможно открыть диалоговое окно jQuery-UI для открытия динамически созданных ссылок
У меня есть следующий код:
<script>
$("#calendar_container").on("click",".day-header-link", function(e){
refreshDialog();
$.ajax({
url: $(this).attr("href"),
success: function(data){
$(".hover-form").empty().append(data).dialog("open");
}
});
return false;
});
</script>
Довольно простой и прямой, работает как шарм, когда ссылки, которые кликали не загружены динамически. Когда они динамически загружаются, я получаю следующую ошибку.
Uncaught TypeError: $(...).empty(...).append(...).dialog is not a function
Я поставил ссылочный DIV в нединамическую часть страницы, я инициализируюсь диалоговое окно со следующей функцией, а также, на которую ссылаются в фрагменте коды выше.
function refreshDialog(){
//kick up the hover form stuff
$(".hover-form").dialog({
autoOpen: false,
draggable: false,
minWidth:350,
minHeight: 200,
modal: true,
buttons: [
{
text: "Close",
icons: false,
click: function() {
$(this).dialog("close");
}
}
]
});
}
Если это уместно, вот фрагмент, который динамически загружает следующий месяц в календаре.
$("#calendar_container").on("click","#previous_month",function(e){
//get data from link
res = $(this).attr("href");
res = res.replace("schedule","ajax");
res = res.replace("view","standalone_calendar");
$("#calendar_container").empty();
$("#calendar_container").html("<img src=\""+BASE_URL+"/images/loading.gif\" alt=\"loading\" />");
$.ajax({
async: true,
url: res,
method: "post",
data: "",
success: function(c){
$("#calendar_container").empty().append(c);
}
});
return false;
});
$("#calendar_container").on("click","#next_month",function(e){
//get data from link
res = $(this).attr("href");
res = res.replace("schedule","ajax");
res = res.replace("view","standalone_calendar");
$("#calendar_container").empty();
$("#calendar_container").html("<img src=\""+BASE_URL+"/images/loading.gif\" alt=\"loading\" />");
$.ajax({
async: true,
url: res,
method: "post",
data: "",
success: function(c){
$("#calendar_container").empty().append(c);
}
});
return false;
});
Не уверен, но вы думаете, что хотите делегировать события («on» относится к объекту DOM, который содержит все ваши динамические ссылки). См. Также http://api.jquery.com/on/ –
@JohnHascall из того, что я могу сказать (без разметки), похоже, что OP делегирует элемент '# calendar_container' с кликами, исходящими из' day-header- link'. Трудно сказать без проверяемого примера. – hungerstar
#calendar_container - это статический элемент на странице, содержащий динамические ссылки, которые должны открыть диалог. Класс .hover_form также является статическим элементом на странице. –