i am triyng to acces an elemet using its new atribute.
HTML
<div class="element">Element1</div> The script is
$('.element').one("click", function() { $.getScript('/script.js'); }); $('#activated').click(function() { alert(1); }); Inside the script.js file :
$('.element').attr("id", "activated"); The script.js adds the id #activated to the div, but .click() won't work using the new id.
Can someone please tell me why?
$('#activated') is evaluated before any element has that id, so it finds no elements, and no click handlers are attached to any elements.
You can use event delegation to work around this. A click handler will be attached to the document body immediately, but it will only trigger its callback if the target element matches the '#activated' selector:
$(document.body).on('click', '#activated', function() { alert(1); }); When the line $('#activated').click(function() is executed, there is no element with ID of activated in the document, so jQuery returns an empty collection and click method silently fails. You can either use the event delegation technique:
$(document).on('click', '#activated', function() or check the id of the clicked element in your first event handler:
$('.element').on("click", function() { if ( this.id === 'activated' ) { // ... } else { $.getScript('/script.js'); } }); 
$.getScript('/script.js'); can be executed more than once if the button is clicked multiple times before script.js has loaded once. (If script.js's effect is idempotent, then that could be a useful feature: if it fails to load the first time, then the user can click the button again to try to load the script again.)
try $(document).on('click','#activated',function(){ // do somthing here }); it might work. Tell me it doesnt.
click method calls the on method behind the scenes, so effectively it doesn't make a difference, if you want to delegate the event, another version of on method should be used.
$('#activated').click(...in$(document).ready(...and since you dynamically insert theactivatedid it is not there until you click theelementdiv, which will happen long after$(document).ready(...has executed. So$('#activated')will not be found.