2016-12-03 48 views
1

我試圖做用戶點擊按鈕的一些操作:Clipboardjs內jQuery.get()不工作()完成

  1. 使用jQuery AJAX調用從服務器獲取一些數據。
  2. 成功時,保存此數據我們按鈕屬性data-clipboard-text值。
  3. 使用clipboardjs將此值複製到剪貼板。

問題:步驟3使用虛擬文本在jQuery.get().done()之外完美工作,但不在done()之內。這不是我所期望的,因爲clipboardjs在沒有目標值的情況下觸發複製。

(function ($) { 
var root = {}; 
root = { 
    get_client_addresses_from_server: function (btn) { 

     var url = btn.attr('data-src'); 
     $.get(url, function (data) { 
      } 
     ).done(function (data) { 
      btn.attr('data-clipboard-text', data.text); 

      // here clipboardjs is unable to copy 
      var clipboard = new Clipboard('.btn', { 
       text: function (trigger) { 
        return trigger.getAttribute('data-clipboard-text'); 
       } 
      }); 

      clipboard.on('success', function (e) { 
       console.info('Action:', e.action); 
       console.info('Text:', e.text); 
       console.info('Trigger:', e.trigger); 

       e.clearSelection(); 
      }); 

      clipboard.on('error', function (e) { 
       console.error('Action:', e.action); 
       console.error('Trigger:', e.trigger); 
      }); 


     }); 


    }, 
}; 

$('#client-action-form .form-actions button[value="copy_addresses"]').click(function (event) { 
    event.preventDefault(); 
    root.get_client_addresses_from_server($(this)); 
}); 
})(jQuery); 

回答

0

實測溶液自己:http://jsfiddle.net/zenorocha/n5pLh1rk/2/

$.ajax({ 
    url: "https://api.github.com/repos/zenorocha/clipboard.js/readme", 
    dataType: "jsonp" 
}) 
.done(function(result) { 
    copy(result.data.content); 
}); 

function copy(someText) { 
    var clipboard = new Clipboard('.btn', { 
     text: function() { 
      return someText; 
     } 
    }); 

    clipboard.on('success', function(e) { 
     console.log(e); 
    }); 

    clipboard.on('error', function(e) { 
     console.log(e); 
    }); 
}