Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   куда пропадает event ? (https://javascript.ru/forum/events/77678-kuda-propadaet-event.html)

Malleys 06.06.2019 14:14

Цитата:

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

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

laimas 06.06.2019 14:19

Цитата:

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

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

greenwar 06.06.2019 16:45

Цитата:

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

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

Dilettante_Pro 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 06.06.2019 18:32

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

Dilettante_Pro 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 06.06.2019 19:04

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

рони 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>

рони 06.06.2019 19:16

Цитата:

Сообщение от greenwar
а какое решение

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

greenwar 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, то во второй раз календарь уже не показывался

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


Часовой пояс GMT +3, время: 05:38.