События jquery на входных полях отправки - PullRequest
0 голосов
/ 06 января 2011

У меня проблема с нажатием кнопки отправки jquery и событием по умолчанию. Что я хочу сделать, это заменить событие click на кнопке submit, если оно есть, и получить диалоговое окно для отображения, при нажатии yes диалоговое окно должно запустить это событие onclick по умолчанию, если кнопка submit имеет определенное значение, если оно не имеет чем должно произойти событие по умолчанию (кнопка отправляет форму), функция .submit () не работает для меня в любом случае, потому что мне нужно отправить эту кнопку также через форму, и если кнопка не была нажата .submit () отправляет данные формы без предоставления данных.

Сильфонный код имеет проблему, оповещение ('xxx') всегда вызывается и не должно, и при нажатии кнопки да вызывается оповещение и создается диалоговое окно, также, если я удаляю кнопку оповещения, я не могу вызвать кнопку отправки по умолчанию событие (отправка формы кнопкой).

$('input.confirm').each(function(){
    var input = this;
    var dialog = document.createElement("div");
    $(dialog).html('<p>AREYOUSHURE</p>');
    $(input).click(function(event)
    {
        event.preventDefault();
        var buttons = {};
        buttons['NO'] = function() { $(this).dialog("close"); };
        buttons['YES'] = function() { $(input).trigger('click'); $(this).dialog("close"); };

        $(dialog).dialog(
        {
            autoOpen: false,
            width: 200,
            modal: true,
            resizable: false,
            buttons: buttons
        });
        $(dialog).dialog('open');
        return false;
    });
});

<form method="post" action="">
    <input type="hidden" value="1" name="eventId" />
    <input type="submit" value="Check" name="checkEvent" class="confirm" onclick="alert('xxx');" />
</form>

Ответы [ 2 ]

0 голосов
/ 13 апреля 2013

Можно вызывать обработчик по умолчанию из не используемого по умолчанию, комбинируя методы on() и off() (доступно в jQuery 1.7+).Идея такова:

  • добавить пользовательский обработчик, используя метод on(), который вызывает preventDefault();
  • , в случае, если нажата кнопка подтверждения, используйте off() для удаления пользовательского обработчика передВызов trigger().

Ваш пример будет выглядеть следующим образом:

$(function() {
  var input = $('input.confirm');
  var dialog = document.createElement("div");

  $(dialog).html("<p>AREYOUSHURE</p>");
  $(dialog).dialog({
    autoOpen: false,
    width: 200,
    modal: true,
    resizable: false,
    buttons: {
      "NO": function() {
        $(this).dialog("close");
      },
      "YES": function() {
        $(this).dialog("close");
        $(input).off("click", askConfirmation);
        $(input).trigger("click");
      },
    }
  });

  var askConfirmation = function (event) {
    event.preventDefault();
    $(dialog).dialog("open");
  };

  $(input).on("click", askConfirmation);
});

Этот код ничего не изменит при нажатии кнопки NO и отправитформа с правильным значением submit при нажатии кнопки YES .

Также обратите внимание, что использование атрибута onclick с jQuery может вызвать непредвиденное поведение, даже если вы используете его только для тестирования.Я бы рекомендовал установить <form action="/some/unexistent/url">, чтобы проверить, было ли инициировано действие по умолчанию (если оно произошло, вы увидите что-то вроде ошибки 404; в противном случае вы останетесь на той же странице).

0 голосов
/ 06 января 2011

Когда вы добавляете событие onclick, оно будет выполняться независимо от любого jquery.Хорошей практикой считается не использовать onclick, если вы смешиваете с jquery.

Лучшее решение:

var buttons = {};
var dialog = document.createElement("div");
$(dialog).html('<p>AREYOUSHURE</p>');
$('.confirm').click(function(event){
    event.preventDefault();
    var input = $(this);
    buttons['NO'] = function() { $(this).dialog("close"); };
    buttons['YES'] = function() { $(input).trigger('click'); $(input).closest('form').submit(); $(this).dialog("close"); };

    $(dialog).dialog(
    {
        autoOpen: false,
        width: 200,
        modal: true,
        resizable: false,
        buttons: buttons
    });
    $(dialog).dialog('open');
    return false;
});  

Создайте кнопки глобальной области видимости.Затем, когда вы нажмете «да», просто отправьте форму

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...