jQuery Как остановить функции, чтобы они происходили по одной

Question

У меня есть форма, где пользователь может ввести заголовок страницы в поле ввода, и он сгенерирует URL. При нажатии кнопки «Отправить» значение отображается в другом поле ввода (URL). Если они недовольны своим URL-адресом, они могут вручную отредактировать его в этом поле и затем сохранить свои изменения нажатием кнопки.

Значение кнопки также изменяется в зависимости от состояния поля URL.

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

JSfiddle здесь

Answer 1

Последние 2 функции запускаются вместе, потому что вы назначили их в качестве обработчика щелчка одному и тому же элементу .

рассмотрите следующий JS:
Я объединил телаобе функции к 1. Теперь они будут выполняться одна за другой.

// Display entered text in URL field on submit
    $("input#page_url_button").click(function () {
      var text = $("input#page_title").val();
      $("input#page_url").val(text);
    });


// If URL has info in it, then change value of button and add class to button
    $("input#page_url_button").click(function () {
    if( $("input#page_url").val().length > 0 ) {
          $(this).val("Edit URL");
          $(this).addClass("edit_url_button");
    }

    if( $(this).hasClass('edit_url_button') ) {
          $(this).val("Save");
          $("input#page_url").removeAttr("disabled");
          $(this).removeClass("edit_url_button");
          $(this).addClass("save_url_button");
    }

    }); // This part is getting skipped, I need to find a way to include this in the process

Answer 2

Это это то, что вы ищете:

$("input#page_url_button").click(function() {
    // Display entered text in URL field on submit
    var text = $("input#page_title").val();
    $("input#page_url").val(text);
    if ($(this).hasClass('edit_url_button')) {
        $(this).removeClass("edit_url_button");
        $(this).addClass("save_url_button");
        alert('Saved!');
        $(this).val("Submit");
        $("input#page_url").val('').attr('disabled', 'dsabled');
    }
    else if ($("input#page_url").val().length > 0) {
        $('input#page_title').val("Edit URL");
        $(this).addClass("edit_url_button");
        $(this).val("Save");
        $("input#page_url").removeAttr("disabled");
    }
});

Answer 3

Невозможно в JavaScript или jquery гарантировать приоритет порядка событий.Я бы порекомендовал попытаться изменить функцию 2-го события на нормальную функцию и вызвать ее в конце 1-го

function clickhandler(event)
{
   //do stuff
   //...
   clickhandler2(event);
}

function clickhandler2(event)
{
   //do stuff
   //...
}

Answer 4

Вместо комбинирования обоих обработчиков я использовал jQuerys live обработчик событий для второго клика.

$("input#page_url_button.edit_url_button").live('click', function () {
      alert("2");
      $(this).val("Save");
      $("input#page_url").removeAttr("disabled");
      $(this).removeClass("edit_url_button");
      $(this).addClass("save_url_button");
});

См. Пример на http://jsfiddle.net/dJPvJ/

Редактировать:

Я был на полпути с моим первоначальным ответом, этот исправленный код должен делать то, что вам нужно:

// If URL has info in it, then change value of button and add class to button
$("input#page_url_button.save_url_button").live('click', function () {
if( $("input#page_url").val().length > 0 ) {
      $(this).val("Edit URL");
      $(this).addClass("edit_url_button");
}
}); // This part is getting skipped, I need to find a way to include this in the process


// If this button has class (edit_button_url) change value, add new class and remove the Dsiabled attr from URL field
$("input#page_url_button.edit_url_button").live('click', function () {
      $(this).val("Save");
      $("input#page_url").removeAttr("disabled");
      $(this).removeClass("edit_url_button");
      $(this).addClass("save_url_button");
});

Чтобы это сработало, вам также необходимодобавить "save_url_button" к исходной разметке:

<input id="page_url_button" type="button" value="Submit" class="save_url_button fright" style="width:60px">