Question

点击组合框我正在进行ajax调用。

如果没有ajax调用，切换工作正常，请在没有ajax调用的情况下查看此jsfiddle。

但是当我整合ajax以将动态数据附加到组合框选项时，切换无法正常工作

这是我的代码

(function($) {
  $('.combobox').on('click', '.txt-btn', function() {
    var ajaxcall = $.ajax({
      url: 'test',
      success: function(data) {
        alert('ajx call completed');
      }
    });
    ajaxcall.done(function() {
      $txtboxBtn = $(this);
      $comboboxOptions = $txtboxBtn.parent().next();
      $comboboxOptions.slideToggle();
    });
  });
})(jQuery);

你能告诉我如何解决这个问题吗？

Answer 1

试试这个

(function($) {
  $('.combobox').on('click', '.txt-btn', function() {
  var x=$(this);
    var ajaxcall = $.ajax({
      url: 'test',
      success: function(data) {
        alert('ajx call completed');
      }
    });
    ajaxcall.done(function() {
      $txtboxBtn = x;
      $comboboxOptions = $txtboxBtn.parent().next();
      $comboboxOptions.slideToggle();
    });
  });
})(jQuery);

Answer 2

您的切换功能无效，因为您错过了范围，无法通过$(this)访问您的元素，因此要解决该问题，您必须参考this创建变量：

var me = this;
var ajaxcall = $.ajax({
// .....

在me处理程序中使用该变量（this）代替ajaxcall.done。

ajaxcall.done(function() {
  $txtboxBtn = $(me);
  // ....

http://jsfiddle.net/xgz5s0yo/

Answer 3

问题是，你的ajax done处理程序中的this也没有引用该元素，它指的是ajax对象。

您可以使用闭包变量来解决问题

(function($) {
  $('.combobox').on('click', '.txt-btn', function() {
    var $txtboxBtn = $(this);
    var ajaxcall = $.ajax({
      url: '/echo/html/',
      success: function(data) {
        alert('ajx call completed');
      }
    });
    ajaxcall.done(function() {
      $comboboxOptions = $txtboxBtn.parent().next();
      $comboboxOptions.slideToggle();
    });
  });
})(jQuery);

演示：Fiddle

与Ajax调用集成后，Toggling无法正常工作

3 个答案: