2017-01-30 3 views
0

ОК, странная проблема здесь.Невозможно открыть диалоговое окно 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; 
}); 
+0

Не уверен, но вы думаете, что хотите делегировать события («on» относится к объекту DOM, который содержит все ваши динамические ссылки). См. Также http://api.jquery.com/on/ –

+1

@JohnHascall из того, что я могу сказать (без разметки), похоже, что OP делегирует элемент '# calendar_container' с кликами, исходящими из' day-header- link'. Трудно сказать без проверяемого примера. – hungerstar

+0

#calendar_container - это статический элемент на странице, содержащий динамические ссылки, которые должны открыть диалог. Класс .hover_form также является статическим элементом на странице. –

ответ

0

Не уверен, что это лучшее решение, но я переместил вызов моей функции refreshDialog() в части успеха Ajax и все работает гладко.

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