Модальный диалог jQuery конфликтует с html() и возвращает false;

#jquery #html #modal-dialog

#jquery #HTML #модальный диалог

Вопрос:

У меня есть организационная диаграмма с использованием slickmap.css, которую я изменил с помощью переключения показывать / скрывать. Все работает нормально, но теперь мне нужно добавить модальное диалоговое окно при нажатии и отображать информацию из тега a.

Мне удалось это сделать, но пришлось добавить значение return false, чтобы предотвратить выполнение действия переключения. Теперь, когда я отображаю информацию, она полностью удаляет тег a со страницы. Я думаю, что когда я добавляю html (this), он игнорирует возвращаемое значение false в конце.

Пожалуйста, кто-нибудь может помочь мне заставить эти две функции работать вместе.

Вот код, который я использую для вызова модального диалога, извините, я не опубликовал скрипку, но я думаю, что в этом и заключается проблема

 $('#samplelink').click(function(){
  $('#modal_window').dialog('open').html(this);
  return false;
}); //end click handler
  

Комментарии:

1. Чего вы хотите достичь с помощью .html(this) ? Вы ищете .html($(this).html()) ?

2. Спасибо, да, это сработало. Пожалуйста, вы можете сказать мне, почему это сработало. Также опубликуйте это как ответ, и я приму, приветствия

3. На самом деле я понимаю, почему это сработало, а у меня получилось только наполовину, спасибо 🙂

Ответ №1:

Вы не можете перейти this к методу html().

Поскольку этот код находится внутри обработчика событий, this это будет элемент DOM, обрабатывающий событие ( click в нашем случае). html() может принимать только строку или аргумент функции.

Если ваша цель — заполнить диалоговое окно содержимым #samplelink , вам следует вызвать html() текущий элемент без аргументов, а затем вызвать html() диалоговое окно с результирующей строкой:

 $("#samplelink").click(function() {
    $("#modal_window").dialog("open").html($(this).html());
    return false;
});
  

Комментарии:

1. Спасибо за объяснение, я понятия не имел, что присвоенное значение «this» может измениться, если оно находится внутри обработчика событий. Приветствия

Ответ №2:

Попробуйте :

 $('#samplelink').click(function(){
  $('#modal_window').dialog('open').html($(this).html());
  return false;
}); //end click handler
  

Где $(this).html() содержит допустимый HTML-код.

Вы могли бы попробовать быстро

 $('#samplelink').click(function(){
  $('#modal_window').dialog('open').html('<h1>Hello World</h1>');
  return false;
}); //end click handler
  

Комментарии:

1. Спасибо, Дэвид, это был правильный ответ, Фредерик уже отвечал на него раньше в комментариях, вот почему я выбрал его, спасибо