0

我创建了一个生成自定义输入的简码：

function input_plus_moins() {
    $output = "
            <div data-role='controlgroup' data-type='horizontal' data-mini='true'>
             <button id='plus' data-inline='true'>+</button>
                <input type='text' name='number' id='number' value='0' />
             <button id='minus' data-inline='true'>-</button>
            </div>
        ";
    return $output;
}

然后我可以通过点击 jQuery 的加号或减号按钮来增加或减少输入值

$('#plus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value++;
    $('#number').val(value);
});

$('#minus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value--;
    $('#number').val(value);
});

每次我单击任何按钮时，它都会提交表单。

如何修改 JavaScript 文件，以便仅在专门单击提交按钮时提交表单？

4

3 回答 3

2

button元素的默认类型是“提交”。将按钮类型更改为“按钮”为：

function input_plus_moins() {
    $output = "<div data-role='controlgroup' data-type='horizontal' data-mini='true'>" +
        "<button id='plus' type='button' data-inline='true'>+</button>" +
        "<input type='text' name='number' id='number' value='0' />" +
        "<button id='minus' type='button' data-inline='true'>-</button>" +
        "</div>";
    return $output;
}

您还可以通过使用.on()as 来避免绑定/取消绑定：

$(document).on('click', '#plus', function () {
    var value = $('#number').val();
    value++;
    $('#number').val(value);
});

$(document).on('click', '#minus', function () {
    var value = $('#number').val();
    value--;
    $('#number').val(value);
});

或者将它们交替组合到：

$(document).on('click', '#plus,#minus', function (event) {
    var value = $('#number').val();
    if (event.target.id == "plus") value++
    else value--;
    $('#number').val(value);
});

$(document)在这两种情况下，最好用它们附加到的容器的选择器 替换： $('#mycontainerid').on(...

于 2013-08-21T14:13:51.893 回答
2

利用preventDefault();

 $('#plus').click(function (evt) {
        evt.preventDefault();
          var value = $('#number').val();
          value++;
          $('#number').val(value);
           });

      $('#minus').click( function (evt) {
          evt.preventDefault();
             var value = $('#number').val();
             value--;
            $('#number').val(value);
        });

'return false;' 之间的区别 和'e.preventDefault();

于 2013-08-21T13:46:33.557 回答
1

Vadim 是正确的，但正确的方法是这样使用e.preventDefault()：

$('button').on("click", function(e) {
    e.preventDefault();
    // Your code
});

还要确保您的代码中没有任何错误。

享受！

于 2013-08-21T13:46:11.350 回答