Jquery. Change element id

[zura]

Helo,
I try to change element id and then do something with it.
This script changes id, but click not works with it, I dont understand why.

Thanks for help.

$('#some').hover(
    function(){
        $(this).attr('id', 'new');
    }
);
$('#new').click(
    function(){
        $(this).fadeTo('slow' , 0.2);
    }
);

 

[feherke]

Hi

I dont understand why.

The [tt]click[/tt] event handler was already added to all elements with [tt]id[/tt] new when the script was executed.
The [tt]id[/tt] of elements with [tt]id[/tt] some will be changed to [tt]id[/tt] new somewhere in the future when the user will generate a [tt]mouseover[/tt] event.

So you will need to add event handlers again after you set the [tt]id[/tt] which you wish to use for element selection.

However I would rethink all this. No idea what is your goal and what are the restrictions, but for now this sounds as poor design.


Feherke.
feherke.github.io

 

[jpadie]

I agree with feher. dynamically changing the id sounds like very poor design

in order to bring nodes dynamically within an event handler's purview there are two approaches:

1. after changing something rebind the events.
2. bind the event handler to the document and then filter.

e.g.

function doBind(){
 $('.someClass').on('click', function(e){
  //do something
 });
}
$('#some').hover(
    function(e){
        $(this).addClass('someClass');
        doBind();
    }, function(e){
        $(this).removeClass('someClass');
        doBind();
    }
);

$(document).on('click', ".someClass", function(e){
  //do something
});
$('#some').hover{
    $('#some').hover(
    function(e){
        $(this).addClass('someClass');
    }, function(e){
        $(this).removeClass('someClass');
    }
);

 

[zura]

Thanks for help and advice.