Ajax不會在基於webkit的瀏覽器上觸發更改事件

Question

我已經改編了一個jquery插件來填充我的需求，以發送GET請求到服務器作爲「ping」它們的一種方式。

我也添加了一些JavaScript代碼來添加一些奇特的功能，例如：根據Jquery插件更改的跨度中更改的值，它會相應地更改圖標。

爲了使它基本工作，我做了這樣的事情，當Ajax得到一個「完整的」事件時，它強制一個「onChange」事件的跨度，觸發javascript驗證功能來更改狀態圖標。

這是我的稍微修改jQuery插件的代碼：

/** 
* ping for jQuery 
* 
* Adapted by Carroarmato0 (to actually work instead of randomly "pinging" nowhere instead of faking 
* 
* @auth Jessica 
* @link http://www.skiyo.cn/demo/jquery.ping/ 
* 
*/ 
(function($) { 
    $.fn.ping = function(options) { 
     var opts = $.extend({}, $.fn.ping.defaults, options); 
     return this.each(function() { 
      var ping, requestTime, responseTime ; 
      var target = $(this); 
         var server = target.html(); 
         target.html('<img src="img/loading.gif" alt="loading" />'); 
      function ping() { 
       $.ajax({url: 'http://' + server, 
        type: 'GET', 
        dataType: 'html', 
        timeout: 30000, 
        beforeSend : function() { 
         requestTime = new Date().getTime(); 
        }, 
        complete : function() { 
         responseTime = new Date().getTime(); 
         ping = Math.abs(requestTime - responseTime); 

               if (ping > 2000) { 
                target.text('niet bereikbaar'); 
               } else { 
                target.text(ping + opts.unit); 
               } 

               target.change(); 
        } 
       }); 
      } 
      ping(); 
      opts.interval != 0 && setInterval(ping,opts.interval * 1000); 
     }); 
    }; 
    $.fn.ping.defaults = { 
     interval: 3, 
     unit: 'ms' 
    }; 
})(jQuery); 

target.change（）;是觸發「的onchange」事件跨度中的代碼：

echo " <td class=\"center\"><span id=\"ping$pingNb\" onChange=\"checkServerIcon(this)\" >" .$server['IP'] . "</span></td>"; 

在Firefox工作的，checkServerIcon（本）被執行，並傳遞跨度對象的功能。

function checkServerIcon(object) { 
    var delayText = object.innerHTML; 
    var delay = delayText.substring(0, delayText.length - 2); 

    if (isInteger(delay)) { 
     object.parentNode.previousSibling.parentNode.getElementsByTagName('img')[0].src = 'img/servers/enable_server.png'; 

    } else { 

     if (delay == "bezig.") { 
      object.parentNode.previousSibling.parentNode.getElementsByTagName('img')[0].src = 'img/servers/search_server.png'; 
     } else { 
      object.parentNode.previousSibling.parentNode.getElementsByTagName('img')[0].src = 'img/servers/desable_server.png'; 
     } 
    } 

} 

Answer 1

我想你可以嘗試使用checkServerIcon jQuery的內置方法：

$(object).parent().prev().parent().find('img:first').attr({src: 'image-source-here'}); 

有可能是通過使用jQuery的方法，而不是固定的瀏覽器之間的一些怪癖。

Answer 2

使用JavaScript的平變化 的target.change的JQuery的變化方法instaid（）將只觸發jQuery的界函數

Answer 3

這裏的解決方案：

我從跨度刪除onchange事件，而是，給它一個類名：

echo " <td class=\"center\"><span class=\"ping\" id=\"ping$pingNb\">" .$server['IP'] . "</span></td>"; 

接下來，我做了jQuery的加入改變事件本身：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("span.ping").change(checkServerIcon); 
    }); 
</script> 

我的JavaScript函數必須重寫：

function checkServerIcon() { 
    var tr = $(this).parent().parent(); 
    var img = tr.find('td>img').first().attr('src'); 
    var delayText = tr.find('td>span').text(); 
    var delay = delayText.substring(0, delayText.length - 2); 

    if (isInteger(delay)) { 
     tr.find('td>img').first().attr('src','img/servers/enable_server.png'); 

    } else { 

     if (delay == "bezig.") { 
      tr.find('td>img').first().attr('src','img/servers/search_server.png'); 
     } else { 
      tr.find('td>img').first().attr('src','img/servers/desable_server.png'); 
     } 
    } 
} 

而且現在的代碼在Firefox和基於WebKit的瀏覽器，如谷歌瀏覽器:)