jQuery，Ajax內容不可點擊

Question

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容器中。現在，如果我想通過ajax單擊加載的內容的類，則它不起作用。這意味着click事件不適用於ajax返回的內容。

Answer 1

這是因為在綁定事件時，相關元素在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!
});

Answer 2

click()函數僅將事件處理程序綁定到運行時存在的元素，因此任何動態添加的內容均不會受到影響。 為此，您需要使用一種方法將事件處理程序添加到動態生成的內容中，即on() （jQuery 1.7+）或delegate() （jQuery 1.7之前）。 live()已被棄用，不應使用。

Answer 3

您必須使用事件委托才能將附加元素考慮在內。 當僅使用.click（）時，使用ajax加載的元素不在DOM中，因此沒有任何綁定。

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

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

基本上，您將對'.location a'元素的click事件的處理委派給DOM中存在的父級（甚至可以轉到document元素）。
這樣，將自動考慮在此容器中添加的“ .location a”元素。

Answer 4

單擊事件僅在綁定事件偵聽器時對頁面上的元素起作用。

如果您希望click事件在頁面加載后對創建的元素（例如，通過ajax）進行處理，則需要使用許多委托函數之一。

如果您使用的是1.7或更高版本，那么如果使用的是早期版本，請使用on() ，然后使用delegate() 。

上（）

代表（）

Answer 5

您應該使用jlive的live方法將事件綁定到動態元素。 在您的情況下，您應該使用

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