Question

我有一个表单，用户可以在输入字段中输入页面标题，然后生成一个URL。在提交按钮上单击该值将显示在不同的输入字段（URL）中。如果他们对网址不满意，可以在该字段内手动编辑，然后通过点击按钮保存更改。

按钮的值也会根据URL字段的状态而改变。

我的代码正在运行，但我遇到了一次发生的最后两个函数的问题，我尝试添加StopEventPropagation（或类似的），但这对我没用。如果可以，请帮忙。

Answer 1

在JavaScript或jquery中无法保证事件顺序的优先级。我建议尝试将第二个事件功能更改为正常功能，并在第一个结束时调用它

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

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

Answer 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 3

this您要找的是什么：

$("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 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">

jQuery如何停止函数，使它们一次发生一个

4 个答案: