Question

我有一个简单的表单，其中包含一个选择框和两个选项。这是相关的jQuery代码：

QSlider* slider = new QSlider(this);
slider->setOrientation(Qt::Horizontal);
slider->setStyleSheet("QSlider::groove:horizontal { "
                      "border: 1px solid #999999; "
                      "height: 20px; "
                      "background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); "
                      "margin: 2px 0; "
                      "} "
                      "QSlider::handle:horizontal { "
                      "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f); "
                      "border: 1px solid #5c5c5c; "
                      "width: 30px; "
                      "margin: -2px 0px; "
                      "} ");

QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(slider);
layout->addWidget(new QSlider(Qt::Horizontal, this));
setLayout(layout);

表单是选择框的父级。因此，当我更改选择框选项时执行第一个警报，但是从未到达下一个警报。知道为什么吗？

Answer 1

您必须在另一个事件中创建submit事件侦听器：

$('.myCssClass').parent().submit(function(e) {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: $(this).serialize(), 
        success: function(data){
            alert(data);
        }
    });

    e.preventDefault();
});

$('.myCssClass').on('change', function() {
    $(this).parent().submit();
});

或作为链：

$('.myCssClass').on('change', function() {
    $(this).parent().submit();
})
.parent().submit(function(e) {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: $(this).serialize(), 
        success: function(data){
            alert(data);
        }
    });

    e.preventDefault();
});

但为什么两个事件呢？只需发送更改数据：

$('.myCssClass').on('change', function() {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: $(this).parent().serialize(), 
        success: function(data){
            alert(data);
        }
    });
});

Answer 2

$('.myCssClass').on('change', function() {
    alert("This is executed");
    $(this).parent('form#id').submit();  // improve performance by reducing the traversal
});

$("#form-with-id").on('submit', function(e){
  e.preventDefault();
  var data = $(this).serialize();
  $.ajax({
      type: "POST",
      url: "script.php",
      data: data,
      success: function(data){
        alert(data);
      }
  });
});

希望这有效。

Answer 3

这应该这样做。不要为提交事件烦恼 - 它不会被选择框触发。

 $('.myCssClass').on('change', function() {
      $.ajax({
             type: "POST",
             url: "script.php",
             data: $(this).parent().serialize(), 
             success: function(data)
             {
                 alert(data);
             }
      });
  });

Answer 4

尝试以下方法：

$('.myCssClass').on('change', function() {
    alert("This is executed");
    $(".form-with-class").submit();
});

$(".form-with-class").on('submit', function(e){
  e.preventDefault();
  $.ajax({
      type: "POST",
      url: "script.php",
      data: $(".form-with-class").serialize(), 
      success: function(data){
        alert(data);
      }
  });
});

Answer 5

当提供处理程序时，它只是注册处理程序，但它不执行实际的提交。

您可能需要致电：

$(this).parent().submit();

处理程序注册后

。此外，在你的处理程序中，你必须通过＆＃34; $（this）＆＃34;来引用表单。（不是：＆＃34; $（this）。parent（）＆＃34;），因为处理程序属于表单。

但是，既然你已经明确地调用了提交，那么注册一个你随后调用的处理程序是没有意义的。你可以直接解雇你的ajax请求：

$('.myCssClass').on('change', function() {
   alert("This is executed");
      $.ajax({
             type: "POST",
             url: "script.php",
             data: $(this).parent().serialize(), 
             success: function(data)
             {
                 alert(data);
             }
           });
  });

使用ajax和jQuery提交表单

5 个答案: