Как инициализировать функцию event внутри функции?
На станице html расположен дивный блок, который вызывает функцию options и передаёт в качестве параметра this.
HTML
<div class="edit" onclick="options(this)"> ...</div> |
<div class="edit" onclick="options(this)"> ...</div>
JS
function options(obj){ $(obj).click(function (event){ if(event.target.closest('.glyphicon-pencil')) edit(obj); if(event.target.closest('.glyphicon-remove-circle')) remove(obj); if(event.target.closest('.translate')) translate(obj); $(obj).unbind('click'); }); } |
function options(obj){ $(obj).click(function (event){ if(event.target.closest('.glyphicon-pencil')) edit(obj); if(event.target.closest('.glyphicon-remove-circle')) remove(obj); if(event.target.closest('.translate')) translate(obj); $(obj).unbind('click'); }); }
Как вызвать функцию event в один клик и убрать $(obj).click(function (event) внутри options?
Дополнительно:
Нашёл такое вот решение:
function options(obj){ const events = $._data($(obj)[0], 'events'); if(events==null) $(obj).click(function (event){ .... |
function options(obj){ const events = $._data($(obj)[0], 'events'); if(events==null) $(obj).click(function (event){ ....
работает со второго клика.
Если нужно убить onclick
function options (obj) { $(obj).prop("onclick", null); obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); }; |
function options (obj) { $(obj).prop("onclick", null); obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); };
Если не нужно этого делать
function options (obj) { obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); }; |
function options (obj) { obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); };
Чтоб было более понятно, речь идёт о системе комментариев в соц.сети.: Вы крутите ленту и прицепить document.addeventlistener на какой-то конкретный блок нельзя (комментарии подгружаются). При этом с каждым блоком нужно как-то взаимодействовать...
Такое решение:
const events = $._data($(obj)[0], 'events');
решает эту проблему. Сначала пользователь "активирует" комментарий/меню, цепляя слушатель на this блок (например, нажимая на выпадающее меню ... ), а со второго клика делает нужные манипуляции. Далее проверяем this if(events==null) "меню активировано или нет?".
Вы крутите ленту и прицепить document.addeventlistener на какой-то конкретный блок нельзя (комментарии подгружаются).
Кто сказал такое?
Можно.
Вы слышали о делегировании событий?
На чистом JS это чуть сложнее, а вот на jQuery это очень просто. Вы же используете jQuery судя по коду?
$(document).on('click', '.block_cmments .edit', function(e){ e.preventDefault(); let obj = e.target; obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); }); |
$(document).on('click', '.block_cmments .edit', function(e){ e.preventDefault(); let obj = e.target; obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); });
Где .block_cmments .edit та самая кнопка на которой у вас висит функция onclick="options(this)". Эту функцию просто убрать.
Но что по мне, судя по содержанию кода, что-то у вас слишком напутано и слишком замудрёно. С делегированием просто ищете блок родитель от кнопки и передаёте его на редактирование.
Типа так:
$(document) .on('click', '.block_cmments-item .glyphicon-pencil', function(e){ e.prevenDefault(); let block = e.target.closest('.block_cmments-item'); block && edit(block); return !1; }) .on('click', '.block_cmments-item .glyphicon-remove-circle', function(e){ e.prevenDefault(); let block = e.target.closest('.block_cmments-item'); block && remove(block); return !1; }) .on('click', '.block_cmments-item .translate', function(e){ e.prevenDefault(); let block = e.target.closest('.block_cmments-item'); block && .translate(block); return !1; }); |
$(document) .on('click', '.block_cmments-item .glyphicon-pencil', function(e){ e.prevenDefault(); let block = e.target.closest('.block_cmments-item'); block && edit(block); return !1; }) .on('click', '.block_cmments-item .glyphicon-remove-circle', function(e){ e.prevenDefault(); let block = e.target.closest('.block_cmments-item'); block && remove(block); return !1; }) .on('click', '.block_cmments-item .translate', function(e){ e.prevenDefault(); let block = e.target.closest('.block_cmments-item'); block && .translate(block); return !1; });
С делегированием просто ищете блок родитель от кнопки и передаёте его
Это конечно здорово, если это одна ветка комментариев. А если есть ответвления "ответ к комментарию", то искать родительский блок уже будет сложнее. Ответы тоже подгружаются... Кроме того, никаких кнопок изначально нет. Есть только блок "комментарии". И даже он появляется по мере загрузки ленты. То есть, этот блок у каждого поста свой.
onclick="options(this)". Эту функцию просто убрать
Это усложняет поиск и передачу данных относящихся к конкретному комментарию. В this, кроме опций меню, оборачивается сам комментарий и вся необходимая информация.
На чистом JS это чуть сложнее, а вот на jQuery это очень просто. Вы же используете jQuery судя по коду?
Да, я пишу на jQuery. Но от этого ни чуть не легче :)
Где .block_cmments .edit та самая кнопка на которой у вас висит функция onclick="options(this)"
Эти блоки грузятся по мере прокручивания ленты. Их нет после события DOMContentLoaded. Однако, эта конструкция:
$(document).on('click', '.block_cmments', function(e){ e.preventDefault(); let obj = e.target; obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); }); |
$(document).on('click', '.block_cmments', function(e){ e.preventDefault(); let obj = e.target; obj.closest(".glyphicon-pencil") && edit(obj); obj.closest(".glyphicon-remove-circle") && remove(obj); obj.closest(".translate") && translate(obj); });
выглядит вполне жизнеспособной... Я её немного подправил под мои нужды и она работает.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для инициализации функции event внутри другой функции вам нужно использовать следующий синтаксис:
function outerFunction() { function event() { // Код функции event } // Вызов функции event event(); } // Вызов внешней функции outerFunction();
В данном примере мы определяем внешнюю функцию outerFunction, внутри которой определяется вложенная функция event. После определения вложенной функции event, ее можно вызвать внутри внешней функции outerFunction.
Таким образом, при вызове внешней функции outerFunction будет выполнен код вложенной функции event.
Не забудьте, что вложенная функция будет доступна только внутри функции, в которой она определена.