jQuery插件：添加eventlistener元素

我創建了一個小型jQuery插件供個人使用，當您將鼠標懸停在某個元素上時，它將向文檔添加一些內容。jQuery插件：添加eventlistener元素

目前，這是（簡化）代碼：

(function($){ 
    $.fn.tempFnName = function(options){ 

     var element = $('<div />'); 

     return this 
     .each(function(){ 
      $(this) 
      .on('mouseenter', 
       function(){ 
        $('body') 
        .append(element); 
       }) 
      .on('mouseleave', 
       function(){ 
        element.remove(); 
       }); 
     }); 
    }; 
})(jQuery);

出於某種原因，這是行不通的。環顧谷歌和stackoverflow沒有提供一個答案。我究竟做錯了什麼？

編輯：正如WTK所指出的，這段代碼沒有任何問題。以下代碼顯示了該插件應該如何實現。

function appendAddAnchor(){ 
    return $('<a />').tempFnName(); 
} 

//even if I try the following, the click event will not work! 
function appendAddAnchor(){ 
    return $('<a />') 
      .click(function(){console.log('test')}); 
      .tempFnName(); 
}

這真是奇怪，我，因爲我曾經有引導」 .tooltip()鏈接到同一$('<a />')這工作沒有任何問題......

來源

2012-12-03 LuudJacobs

適用於我http://jsbin.com/unelox/1/edit – WTK

在代碼的「簡化」過程中，重要的東西可能已被刪除。 – davidpfahler

我建議您嘗試在http://jsfiddle.net上找到再現問題的簡化方法 – acjay

我在這個小提琴試過這樣：http://jsfiddle.net/Gm4jk/2/

(function ($) { 
    $.fn.tempFnName = function(options){ 
     var element = $('<div/>'); 
     element.html('aTest'); 
     return this.each(function(){ 
      $(this).mouseenter(function(){ 
       $('body').append(element); 
      }); 
      $(this).mouseleave(function(){ 
       element.remove(); 
      }); 
     }); 
    }; 
})(jQuery); 

$('#start').tempFnName();

它工作得很好。這可能是您遇到兼容性問題。

從jQuery的文檔：。

「的的mouseenter JavaScript事件是專有到Internet Explorer由於事件的一般效用，jQuery的模擬這一事件，以便它可以不考慮瀏覽器的使用該事件被髮送到一個元素，當鼠標指針進入元素時，任何HTML元素都可以接收到這個事件。「

我讀到，如果你不使用速記綁定方法，你可能不會得到'模擬'事件，而不是jQuery可能正在尋找的實際事件，除了IE之外，其他都不存在。

爲了清楚起見，我還將它與您在jsFiddle中的代碼一起使用。 http://jsfiddle.net/zFKXx/2/

來源

2012-12-03 15:24:02

jQuery插件：添加eventlistener元素

回答

相關問題