更新類後jQuery點擊功能不起作用

當我使用jQuery更改元素的類時，點擊函數不適用於新類。更新類後jQuery點擊功能不起作用

這裏是我的代碼

jQuery('.close').on('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').on('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});

你可以在這裏嘗試 - 再次切換按鈕http://jsfiddle.net/NkG9k/1/

嘗試點擊。（它不會滑動div）

來源

2012-08-07 rzr

我之所以把它作爲評論發佈，是因爲它並不是嚴格意義上的最有效的方式。它會工作，但我相信其他人會想出更好的解決方案。我可能會使用@Prog Mania併爲元素指定另一個選擇器，例如給它一個ID。 – DaveHogan 2012-08-07 13:59:23

jQuery live（）已折舊，不應使用。 – Logard 2012-08-07 14:00:10

試試這個，在文檔中應用on並使用類過濾器將事件附加到您的按鈕。

Live Demo

jQuery(document).on('click','.close', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery(document).on('click','.open', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});

您需要在您希望此動態行爲，以便當類的改變（從open到close和close到open）元素的靜態父委託事件元素根據新更改的類自動綁定該元素上的事件。

Understanding Event Delegation

事件代表團允許我們附加一個單一的事件偵聽器，到父元素，將火了選擇匹配所有後代，無論是現在存在或在添加這些後代未來。

來源

2012-08-07 13:53:19 Adil

你已經刪除了觸發事件的類。你可以給它一個id，並用id而不是class來調用它。

$('.close').bind('click', function() { 
$('div').toggle(); 
});

如果您：

check this

jQuery('#close').toggle(function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
},function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
}); 
<div id="close" class="close">toggle</div>

來源

2012-08-07 13:54:07

-1

您應該使用，而不是點擊作爲現場活動現場活動創建元素時

jQuery('.close').live('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').live('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});

來源

2012-08-07 13:57:15

jQuery live（）被折舊並且不應該被使用。 – Logard 2012-08-07 13:58:19

@logard爲什麼live（）現在已被棄用？ – 2012-08-07 14:16:21

「從jQuery 1.7開始，不推薦使用.live（）方法。使用.on（）附加事件處理程序。老版本jQuery的用戶應優先使用.delegate（），而不要使用.live（）。 [jQuery API]（http://api.jquery.com/live/） – Logard 2012-08-07 14:20:53

嘗試是這樣的工作需要動畫你可以看看這link

來源

2012-08-07 13:57:17 Logard

如果你想使用下面的代碼。

<button class="toggle">toggle</button> 
<div>THIS IS TEXT</div> 


jQuery('.toggle').toggle( 
    function() { 
     jQuery('div').slideUp(); 
    }, 
    function() { 
     jQuery('div').slideDown(); 
    } 
);

來源

2012-08-07 13:57:44

更新類後jQuery點擊功能不起作用

回答

相關問題