Форум

Malleys · #11 (**permalink**) 06.06.2019, 14:14

Сообщение от greenwar

кстати, если вызван календарь и нажать на крест, то FB исчезает, а календарь остаётся...
а если нажать на background серый, то всё ок.

Ну это вопрос к писателям "плагинов" jQuery (а на деле расширятелям прототипа jQuery) почему они любят без дела отменять распространение событии по DOM...

laimas · #12 (**permalink**) 06.06.2019, 14:19

Сообщение от Malleys

а laimas-то говорил нам, что библиотека как раз для новичков... всё просто и понятно... а тут столько не очевидностей...

Блин, можно подумать, что для начинающего JS так же понятна как Мурзилка. Может хватит кости мыть? Кстати, в jQ много чего не так как ожидаем и что из этого?

greenwar · #13 (**permalink**) 06.06.2019, 16:45

Сообщение от Malleys

Возможно у вас где-то происходит опасный вызов jQuery метода html, который заменяет содержимое... Тогда обработчики будут утеряны! Посмотрите, чтобы у вас не было такого опасного вызова при помощи jQuery!

так у меня там кругом одни .html() -ы
и FB через .html()
а что не так?
а как иначе?

Dilettante_Pro · #14 (**permalink**) 06.06.2019, 18:24

Что-то ТС так и не выдает макет...
Если я правильно понял, то что-то вроде этого

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<style>
html, body {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
#fb {
  display: none;
  border:1px solid black;
}
</style>


<div  id="fb">
	<input id="datepicker">
        <button id = "close">X</button>
</div>

<button id = "open">Open FB</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<script>
$(function() {
   $("#datepicker").datepicker();
   $("#open").on("click", function() {
        $("#fb").show();
        $("#open").hide();
    });
   $("#close").on("click", function() {
        $("#fb").hide();
        $("#open").show();
    });
});
</script>

greenwar · #15 (**permalink**) 06.06.2019, 18:32

с макетом проблемки, там аякс и всё сложно
про .html() можно поподробней, если в нём проблема?

Dilettante_Pro · #16 (**permalink**) 06.06.2019, 18:47

Пример опасного html()
Если не нажимать Переписать - все работает.
Если нажать - все вроде так же, но не работает.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<style>
html, body {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
#fb {
  display: none;
  border:1px solid black;
}
</style>


<div  id="fb">
	<input id="datepicker">
        <button id = "close">X</button>
</div>

<button id = "open">Open FB</button>
<button id = "rewrite">Переписать</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<script>
$(function() {
   $("#datepicker").datepicker();
   $("#open").on("click", function() {
        $("#fb").show();
        $("#open").hide();
    });
   $("#close").on("click", function() {
        $("#fb").hide();
        $("#open").show();
    });
    $("#rewrite").on("click", function() {
        $("#fb").html('<input id="datepicker"><button id ="close">X</button>');

    });  
});
</script>

greenwar · #17 (**permalink**) 06.06.2019, 19:04

ну вот, мой случай - раз! и не работает
а какое решение вместо .html(), когда надо поместить HTML в блок?

рони · #18 (**permalink**) 06.06.2019, 19:14

Dilettante_Pro,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<style>
html, body {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
#fb {
  display: none;
  border:1px solid black;
}
</style>


<div  id="fb">
	<input id="datepicker">
        <button id = "close">X</button>
</div>

<button id = "open">Open FB</button>
<button id = "rewrite">Переписать</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<script>
$(function() {
   $("#fb").on("click", "#datepicker", function() {
   var datepicker = $(this).data("datepicker");
   datepicker || $(this).datepicker().focus() ;

})

   $("#open").on("click", function() {
        $("#fb").show();
        $("#open").hide();
    });
   $("#fb").on("click", "#close", function() {
        $("#fb").hide();
        $("#open").show();
    });
    $("#rewrite").on("click", function() {
        $("#fb").html('<input id="datepicker"><button id ="close">X</button>');

    });
});
</script>

</body>
</html>

рони · #19 (**permalink**) 06.06.2019, 19:16

Сообщение от greenwar

а какое решение

делегирование, строка 40 пост #18

greenwar · #20 (**permalink**) 07.06.2019, 06:46

у меня так, этот блок:

<div  id="fb">
    <input id="datepicker">
        <button id = "close">X</button>
</div>

изначально то пустой и по клику в него (через AJAX) грузится HTML с этим самым полем #datepicker (и другими, кстати, полями)
грузится через

$('#fb_div').html("код");

+ сами .js и .css файлы с датапикером (но это дело десятое)
а уже только потом клик в поле показывает календарь (или не показывает)

"закрытие" же окна происходит через $('#fb_div').hide();

ПРОБЛЕМА РЕШИЛАСЬ
путём переноса jquery-ui.js в <head></head>
(я его не гружу с инета, это же долго)
а если он подгружался с AJAX, то во второй раз календарь уже не показывался

в общем всем спасибо в очередной раз
плюсики раздал всем, где не пишет "вы должны добавить отзыв кому-то ещё..."

Форум

Справочник

Discord чат

Курсы javascript