Скрипт для добавления кода для формирования сообщения об успешном размещении изображения вне сообщения DIV

Question

Я использую сценарий ajax для генерации текста в сообщении об успехе.Последняя часть процесса заключается в добавлении DIV закрытого изображения, который при нажатии должен закрыть (сдвинуть вверх) DIV «панели», который содержит форму и сообщение об успехе, как это происходит при нажатии на закрытое изображение без отправки какого-либо сообщения.Вы можете увидеть форму, нажав «контакт» в навигационной панели на этой странице .

Вот скрипт, который генерирует сообщение об успехе:

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>').appendTo('#message-form').hide().fadeIn(2000, function() {
             $('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>').appendTo('#message-form').hide().fadeIn(2000);
             });
           });
         }
       });

А вот сценарий, который обрабатывает функцию щелчка на кнопке закрытия DIV:

$(".close").click(function ()
        {
            $("#panel").slideUp("slow");
            $("li#contact").removeClass("current");
    //        $("#contact").removeClass("current");
            $panel.visible = false;
            return false;
        });

Может кто-нибудь сообщить мне, почему кнопка закрытия находится вне DIV и почему она не закрывает форму изсообщение об успехе?

Спасибо,

Ник

Answer 1

Я только что проверил это на сайте, на который вы ссылаетесь. Кнопка закрытия на самом деле не находится за пределами div, она просто появляется ниже области, в которой вы хотите, чтобы она отображалась. Это потому, что обтекание <p> имеет высоту 0. И у него есть высота 0, потому что вы перемещаете его содержимое (тег <a>). Просто дайте этому <p> высоту 35px, и все будет в порядке:

$('<p style="text-align:center; height:35px"><a class="close" href="#"><img src="/images/close.png"></a></p>')

Я предполагаю, что обработчик кликов не срабатывает, потому что рассматриваемый элемент .close не существует, когда вы пытаетесь связать событие click. Просто поместите весь этот код $('.close').click(...) после строки, в которой вы создаете элемент .close:

$.ajax({
  type: "POST",
  url: "contact-engine.php",
  data: dataString,
  success: function() {
    $('#contact-form').html("<div id='message-form'></div>");
    $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
    .hide()
    .fadeIn(2000, function() {
      $('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>').appendTo('#message-form').hide().fadeIn(2000, function() {
        $('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>').appendTo('#message-form').hide().fadeIn(2000);
        $(".close").click(function () {
          $("#panel").slideUp("slow");
          $("li#contact").removeClass("current");
          //$("#contact").removeClass("current");
          $panel.visible = false;
          return false;
        });
      });    
    });
  }
});

Answer 2

Я поместил пример (с изменениями) здесь: http://jsfiddle.net/MarkSchultheiss/bUWh4/

Не совсем так красиво, но вы сможете извлечь то, что вам нужно, и щелчок по кнопке сработает, изменив на.на ()

Answer 3

Вот быстрый jsFiddle

http://jsfiddle.net/MRaeq/3/

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

Answer 4

Ваша проблема в том, что метод $(".close").click(function() { ... }) связывает только выбранные элементы, которые в настоящее время существуют в DOM.Вам придется использовать некоторые другие средства, такие как:

$('#message-form').on("click", ".close", function() {
    $("#panel").slideUp("slow");
    $("li#contact").removeClass("current");
    // $("#contact").removeClass("current");
    $panel.visible = false;
    return false;
});

Что касается кнопки закрытия, находящейся вне div, я не совсем уверен, какой div вы имеете в виду, и что именно вы видите.Я бы посоветовал очистить свой AJAX следующим образом:

$.ajax({
    type: "POST",
    url: "contact-engine.php",
    data: dataString,
    success: function() {
        $('#contact-form').html("<div id='message-form'></div>");
        $('#message-form')
            .hide()
            .html("<h3>Your message has been submitted successfully!</h3>")
            .append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>')
            .append('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>')
            .fadeIn(2000);
    }
});

Если, конечно, вы не намерены постепенно прогрессировать.Надеюсь, это поможет!