jQuery的工具提示+生活

-1

$(".tooltip").each(function(){ 
     var tooltip = this.title; 
     this.title = ""; 
     $(this).live("mousemove",function(e){ 
      $("#tooltip").html(tooltip).show(); 
     }).live("mouseout",function(){ 
      $("#tooltip").hide().empty(); 
     }); 
    });

它的工作好，但什麼與通過AJAX動態加載的元素呢？謝謝

來源

2013-01-02 dontHaveName

附註：.live（）已棄用，不應使用。在較舊的（<1.7）jQuery中使用.delegate - 否則應該使用.on。 – rlemon

是否需要在.each（）中？將這項工作：

$(document).on({ 
    mouseover: function() { 
     $('#tooltip').html(tooltip).show(); 
    }, 
    mouseout: function() { 
     $('#tooltip').hide(); 
    } 
}, '.tooltip');

增加了jsFiddle Example

來源

2013-01-02 13:04:47 Syon

是的，它必須是每個，因爲這個訪客可以改變他的控制檯中的工具提示 – dontHaveName

好吧 - 這應該仍然工作;只需將它放在.each（） – Syon

@dontHaveName中添加了一個jsFiddle示例。順便說一句 - 我不會爲使用控制檯的人編寫代碼。這是客戶端內容，隻影響該人 - 如果他們想玩他們，即使你的代碼最高，我可以通過.die（）或.off（）更改工具提示並重新附加一個事件。 – Syon

您可以使用document.ready函數，它將在所有元素加載後運行您的函數。即。

$(document).ready(function() { 
    $(".tooltip").each(function(){ 
     var tooltip = this.title; 
     this.title = ""; 
     $(this).live("mousemove",function(e){ 
      $("#tooltip").html(tooltip).show(); 
     }).live("mouseout",function(){ 
      $("#tooltip").hide().empty(); 
     }); 
    }); 
});

來源

2013-01-02 13:01:32 Ankit

我寫的不好:(我的意思是由ajax加載的元素，所以這個解決方案不會幫助我 – dontHaveName

您應該使用on，以確保事件傳遞給後來添加的元素：

$(document).on('mousemove', ".tooltip", function(e){ 
    this.title = ""; 
    $("#tooltip").html(this.tooltip).show(); 
}).on('mouseout', ".tooltip", function(e){ 
    this.title = ""; 
    $("#tooltip").html(this.tooltip).hide(); 
});

這將適用於所有.tooltip元素。不需要你的each。

來源

2013-01-02 13:05:00

有了這個，請訪問或者可以簡單地改變工具提示:(我不想讓這個 – dontHaveName

你**不能**防止用戶在他們的控制檯中改變你的頁面。永遠不要永遠不要嘗試實施客戶端保護。 –

是的，但是如果有可能，「新手」更改工具提示文本會更困難 – dontHaveName

jQuery的工具提示+生活

回答

相關問題