Question

我有以下脚本

＆＃13;

< script >
  jQuery.noConflict();
jQuery(document).ready(function() {
  jQuery('#filterstype').change(function() {
    //  alert( "Handler for .change() called." );
    jQuery('#filter-form').unbind().submit(function(event) {

      event.preventDefault();
      alert("Handler for .change() called.");
      jQuery.ajax({
        url: '/en/real-estate',
        type: 'post',
        dataType: 'html', //expect return data as html from server
        data: jQuery('#filter-form').serialize(),
        success: function(response, textStatus, jqXHR) {
          jQuery('#filter-form').html(jQuery(response).find('#filter-form').html()); //select the id and put the response in the html
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log('error(s):' + textStatus, errorThrown);
        }
      });
    });
  });
}); < /script>

＆＃13;

相应的html co de如下

＆＃13;

<form action="/en/real-estate" method="post" name="filterform" id="filter-form">

  <input type="text" class="span12" name="filter_search" value="" />




  <select id="filterstype" name="filters[type]">
    <option value="1" selected="selected">Properties for sale</option>
    <option value="3">Address</option>
  </select>

  <button type="submit" class="btn btn-primary btn-large">Search</button>

</form>

＆＃13;

如果我从下拉菜单中选择选项，则表单未提交，但是如果我单击表单上的搜索按钮，则代码会运行，但如果我更改了下拉列表，则提交不会触发。

我做错了什么。谢谢。

Answer 1

下拉change事件的事件处理程序将所有事件解绑定到表单，然后将submit处理程序绑定到表单。

从您的问题看，您希望实际提交表单。要触发提交事件，您需要使用jQuery.submit()的无参数形式。尝试在链的末尾添加额外的.submit()或在jQuery('#filter-form').submit();处理程序中添加change行。

下拉选择.change不触发form.submit

1 个答案: