如何在JavaScript onclick函數中運行jQuery代碼？

點擊「關閉」anchor不會關閉通知。如何在JavaScript onclick函數中運行jQuery代碼？

下面是我的代碼：

function show_notification_on_top(message, type) { 

    content = "<a class='notify-close' onclick='$(\"#notification-box\").fadeOut(\"slow\");' href='#'>close</a>"+ 
       "<p>"+message+"</p>";     

    $("#notification-box").fadeIn('slow', function() { 
      $("#notification-box").delay(60000).fadeOut('slow'); 
     }); 

    $("#notification-box").html(content); 
}

來源

2012-01-23 shaikh

我不知道你對「type」的用法是什麼，但請參閱我的回答，瞭解你在示例代碼中包含的內容。即使在文檔檢查之後，關於'dequeue（）'也不是很明顯。 –

補充一點：

$(document).ready(function(){ 
    $(".notify-close").live("click", function(){ 
    $("#notification-box").fadeOut('slow'); 
    }); 
});

，忘了的onclick（）事件;

來源

2012-01-23 14:02:39

'live'已被棄用+在這種情況下它不是強制性的。 – gdoron

請勿硬編碼onclick事件<a>鏈接，請使用JQuery click不引人注目的訂閱者。

function show_notification_on_top(message, type) { 

    content =   
       "<a class='notify-close' href='#'>close</a>"+ 
       "<p> message </p>";     

    $("#notification-box").fadeIn('slow', function() { 
      $("#notification-box").delay(60000).fadeOut('slow'); 
     }); 

    $("#notification-box").html(content); 

    $('.notify-close').click(function(){ 
      $('#notification-box').dequeue(); 
     }); 
}

來源

2012-01-23 14:03:21 gdoron

我測試過使用IE8，不工作，使它工作改變使用出列'$（'。notify-close'）。click（function（）{（「＃notification-box」）。dequeue（） ; }）; ' –

@MarkSchultheiss。你能解釋一下它做了什麼。關於該主題的_docs_很差。 – gdoron

在這種情況下，出隊將從隊列中移除延遲（60000），並用隨後的fadeOut（'slow'）重新啓動。否則，延遲將保留在元素動畫堆棧上。 –

沒有嘗試過的代碼，但是你想是這樣的......

function show_notification_on_top(message, type) {     

    var anc = $('<a>').addClass('notify-close').html('close').click(function() {$('#notification-box').fadeOut(); }); 

    $("#notification-box").append(anc).fadeIn('slow', function() { 
      $("#notification-box").delay(60000).fadeOut('slow'); 
    }); 


}

來源

2012-01-23 14:03:32 GordonB

我測試使用IE8，不起作用 –

正因爲如此，這是行不通的。幾件事情。

首先：將點擊事件添加到您的代碼中，而不是添加到您添加的標記中。這可以真正簡化你的代碼。

其次：由於之前的延遲和淡入淡出，您的動畫嘗試（fadeOut）將失敗。要正確地工作，只需將您擁有的那個出列。

function show_notification_on_top(message, type) { 
    content = "<a class='notify-close' href='#'>close</a>" + "<p>" + message + "</p>"; 
    $("#notification-box").fadeIn('slow').delay(60000).fadeOut('slow'); 
    $("#notification-box").html(content); 
} 

$(document).on('click', '.notify-close', function() { 
    $('#notification-box').dequeue(); 
});

注意，.on('click',增加了一個現場事件處理程序，讓您從標記刪除事件。

我寫的代碼的功能是：在關閉時顯示消息，如果手動關閉，可以等待60000毫秒，然後按照定義淡出。

這裏是一個工作示例：http://jsfiddle.net/MarkSchultheiss/X6qDJ/

編輯：注意OP。如果你是固定上必須包括你有現在的情況下，您可以更改您的代碼：代替

content = "<a class='notify-close' onclick='$(\"#notification-box\").dequeue();' href='#'>close</a>" + "<p>" + message + "</p>";

：

content = "<a class='notify-close' onclick='$(\"#notification-box\").fadeOut(\"slow\");' href='#'>close</a>" + "<p>"+message+"</p>";

來源

2012-01-23 14:50:04

謝謝大家。在你的幫助下，我寫了這段代碼。完美無缺。

function show_notification_on_top(message) { 

    content =  "<a class='notify-close' id='notification_anchor' href='#'>close_button_label</a>"+ 
        "<p>"+message+"</p>"; 


    $("#notification-box").fadeIn('slow'); 

    $("#notification-box").html(content); 

    $('#notification_anchor').click(function() { 
     $("#notification-box").fadeOut("slow"); 
    }); 

    window.setTimeout(function() { 
     $("#notification-box").fadeOut('slow'); 
    }, 6000); 
}

來源

2012-01-25 08:06:10 shaikh

如何在JavaScript onclick函數中運行jQuery代碼？

回答

相關問題