更改的ID沒有被jQuery找到

更多的概念證明，我想知道爲什麼這不起作用。我試圖做的是使用jquery事件來更改ID屬性，然後使用綁定到這個新更改的ID的另一個jquery事件。

例如：

<?php 
echo <<<END 
<html> 
<head> 
<style> 
#before { 
    color:maroon; 
} 
#after { 
    color:blue; 
} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<title>Test</title> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#before").hover(function() { 
     $(this).attr("id","after"); 
    }); 

    $("#after").click(function() { 
     alert("Handler for .click() called."); 
    }); 
}); 
</script> 
</head> 
<body> 
<p id="before">TEST TEXT</p> 
</body> 
</html> 
END; 
?>

懸停在我的測試文本，從栗色的顏色變爲藍色，符合市場預期。這是我的理解，文本現在將具有「後」的ID和點擊事件處理函數單擊時應用。但是，情況並非如此，快速事件處理程序及其關聯的警報似乎不會觸發。

我是新來的jquery有沒有更新處理函數我忽略？

來源

2014-10-10 lowcrawler

你不能這樣做後觸發click事件，既然選擇，只能判斷在你的情況準備好了...你需要使用事件代表團...我也會推薦c掛一個類的屬性，而不是更改ID – 2014-10-10 03:14:56

你是否暗示這會在document.ready之外工作？或者你是否有效地說，在其ID改變後不可能與元素進行交互？有沒有辦法強制更新DOM？ – lowcrawler 2014-10-10 03:17:30

將其標記爲重複的，因爲同樣的概念也適用於此處...因爲選擇器在運行時期間發生更改 - http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – 2014-10-10 03:18:09

它的工作原理與Event binding on dynamically created elements?相同。

將事件處理程序添加到使用選擇器找到該元素的元素時，選擇器僅在處理程序添加到元素後執行代碼時執行一次。一旦發生變化，如果您更改與元素相關聯的選擇器值，它將不會反映在附加的處理程序中。

例如在你的情況下，你正在將一個處理程序添加到在dom就緒處理程序中使用ID爲before的元素，因此一旦dom就緒事件被觸發，你的選擇程序將被評估，並返回一個單元素，處理程序。在相同的DOM準備好處理程序中，您正在嘗試向ID爲after的元素添加單擊處理程序，但是在DOM準備好後，沒有包含該ID的元素，因此處理程序未附加到任何元素。

現在在稍後您正在更改elemnet的id，但它不會影響已連接的處理程序，也不會添加新的處理程序。

這裏的解決方案是使用一種稱爲event delegation的機制。

演示：

$(document).ready(function() { 
 
    //there is no need to use hover as your want to add the class when the mouse enter the element and you don't want to do anything in mouseleave 
 
    $("#mytarget").mouseenter(function() { 
 
    $(this).addClass("after").removeClass('before'); 
 
    }); 
 

 
    //look at the use of event delegation 
 
    $(document).on('click', '.after', function() { 
 
    alert("Handler for .click() called."); 
 
    }) 
 
});

.before { 
 
    color: maroon; 
 
} 
 
.after { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p id="mytarget" class="before">TEST TEXT</p>

來源

2014-10-10 03:27:46

我還想指出，似乎有更多的運行時友好的更改類的方法。例如，http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – lowcrawler 2014-10-10 03:38:39

@lowcrawler正在更新一個演示....有一些額外的意見 – 2014-10-10 03:40:19

您可以懸停事件

$(document).ready(function(){ 
$("#before").hover(function() { 
    $(this).attr("id","after"); 
    $("#after").click(function() { 
    alert("Handler for .click() called."); 
}); 
    return false; 
}); 
});

來源

2014-10-10 03:40:44 wfy

你可能想提供一些解釋，以清晰度OP ... – webeno 2014-10-10 04:28:51

更改的ID沒有被jQuery找到

回答

相關問題