Drupal 7 #ajax 更改事件可防止同一元素上的其他更改事件处理程序答案

【问题标题】：Drupal 7 #ajax change event prevents other change event handlers on the same elementDrupal 7 #ajax 更改事件可防止同一元素上的其他更改事件处理程序
【发布时间】：2017-03-02 10:55:07
【问题描述】：

我正在使用 Drupal 7 Form Api 构建带有选择元素的自定义表单。我正在为其附加#ajax 回调，它将在更改事件时触发。

$form['landing']['country'] = array(
    '#type' => 'select',
    '#options' => array(),
    '#attributes' => array('class' => array('landing-country-list')),
    '#validated' => TRUE,
    '#prefix' => '<div id="landing-countries" class="hide">',
    '#suffix' => '</div>',    
    '#title' => 'Select country',
    '#ajax' => array(

      'wrapper' => 'landing-cities',

      'callback' => 'get_cities',

      'event' => 'change',

      'effect' => 'none',

      'method' => 'replace'

    ),    
);

但问题是它阻止了 js 中相同选择的自定义更改功能。在这个函数中，我想获得选定的选项值。所以这不会触发：

$('body').on('change', 'select.landing-country-list', function() {
    optval = $(this).find('option:selected').val();
});

此代码在文件中，我将其包含在 $form 中：

$form['#attached']['js'] = array(
    'https://code.jquery.com/jquery-2.2.4.min.js',
    drupal_get_path('module', 'landing') . '/landing.js',
);

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery drupal drupal-7

【解决方案1】：

如果你想在 ajax 发送之前捕获，你可以使用：

$(document).ajaxSend(function(){
    var val = $('select.landing-country-list').val();
});

否则如果你想在ajaxcallback之后获取值：

    $(document).ajaxComplete(function(event, xhr , options) {
          if(typeof options.extraData != 'undefined' && options.extraData['_triggering_element_name'] === 'country'){
// only on ajax event attached to country select
               var val =  $('select.landing-country-list').val();
          }
    });

【讨论】：