jquery，ajax內容不可點擊

jQuery(".location a").click(function() 
     { 
      var data="type=loc&data="+jQuery(this).attr('name'); 
      jQuery.ajax({ 
        type: "POST", 
        url: "<?php echo home_url('/');?>wp-content/plugins/manageTeam/ajax.php", 
        data: data, 
        beforeSend: function() { 
         jQuery(".teammemcont").hide(); 

         }, 
        success: function(msg){ 
          jQuery(".teammemcont").html(msg); 
          jQuery(".teammemcont").show();         
        } 
       }); 

     });

這裏ajax返回的內容被加載到teammemcont container.now如果我想點擊ajax加載內容的類，那麼它不工作。這意味着點擊事件沒有處理Ajax返回的內容。jquery，ajax內容不可點擊

來源

2012-01-16 Chinmoy

這是因爲有問題的元素在事件綁定時不存在於DOM中。您需要綁定與on方法或事件（如果你使用jQuery 1.7+）delegate（如果您使用的是舊版本）：

//jQuery 1.7+ 
$(".teammemcont").on("click", ".someClass", function() { 
    //Newly added element clicked! 
}); 

//Older versions... 
$(".teammemcont").delegate(".someClass", "click", function() { 
    //Newly added element clicked! 
});

來源

2012-01-16 10:36:32

我已經改變了我的代碼爲代表的jQuery（「位置」，「點擊」，函數（）{...}）;但它不工作...如果我把身體，而不是.teammemcont它工作...這裏位置類是在teammemcont類之外。 – Chinmoy 2012-01-16 10:57:59

您需要在要觸發事件的元素的祖先上調用委託。所以如果'.location'不在'.teammemcont'裏面，它就不起作用。正如你發現的那樣，「身體」應該起作用，因爲一切都應該是後代。 – 2012-01-16 11:04:12

那麼解決方案是什麼呢？plz查看鏈接http://www.tomlodziak.co.uk/gtssweb/?page_id=16這裏中間div元素可以通過ajax（通過點擊位置，az或過濾器）來改變中間元素會在彈出後顯示，但它不適用於ajax輸出 – Chinmoy 2012-01-16 11:31:41

的click()功能僅結合事件處理程序的元素它在運行時存在，所以任何動態添加的內容都不會受到影響。爲此，您需要使用一種方法將事件處理程序添加到動態生成的內容中，即on()（jQuery 1.7+）或delegate()（jQuery 1.7之前）。 live()已棄用，不應使用。

來源

2012-01-16 10:37:03

您必須將事件委託用於考慮附加元素。當簡單地使用.click（）時，使用ajax加載的元素不在DOM中，因此沒有綁定到它們。

使用.on()（或.delegate()）：

$('.teammemcont').on('click', '.location a', function(e) { 
    ... 
});

基本上，你委託的單擊事件的處理「.location一個」元素，在DOM存在（你甚至可以上升到父文檔元素）。
這樣，在這個容器中添加'.location a'元素將被自動考慮。

來源

2012-01-16 10:37:36

單擊事件僅在綁定事件偵聽器時處理頁面上的元素。

如果您希望您的點擊事件可以在創建的元素上工作（例如通過ajax實現）在頁面加載完成後，您需要使用衆多代理函數之一。

如果您使用的是1.7或更高版本，則使用on()如果您使用的是早期版本，則使用delegate()。

on()

delegate()

來源

2012-01-16 10:38:15

你應該使用jquery的live方法綁定事件動態元素。（「teammemcont 」）。在你的情況，你應該使用

$("class selector").live('click',function(){ 
//do stuff 
});

來源

2012-01-16 10:39:35 Dau

'live'已被棄用時它不起作用。如果你使用jQuery 1.7+，你應該使用'on'。如果你使用的是舊版本，你應該使用'委託'。 – 2012-01-16 10:40:17

@JamesAllardice感謝您的更新。我檢查了這一點 – Dau 2012-01-16 10:42:59

jquery，ajax內容不可點擊

回答

相關問題