jQuery - Adding a link to html()

Question

I have a link inside of a div element. The link has a click listener.

$(document).ready(function() {
    $('#theLink').click(function() {
        // do stuff
    });
})

<div id="myElement"><a class="myLink" id="theLink">Click here</a></div>

At some point in my application, I have to clear the div elements contents, and then have to re-write them again later. When I rewrite the link using .html(''), I lose the click listener and the link doesn't work.

$('#myElement').html(''); // clear element

$('#myElement').html('<a class="myLink" id="theLink">Click here</a>');

Do I need to add a new listener to get this link working again?

@ShadowWizard this isn't a comment, because it's the answer :) — Ahmet Kakıcı
– Ahmet Kakıcı, Commented Jan 22, 2012 at 16:14
Why must you destroy the element? Why not just hide/show it? It doesn't make sense to continuously destroy and recreate the same element, even if methods like on() or live() let you. — user1106925
– user1106925, Commented Jan 22, 2012 at 16:21
+1 @ShadowWizard. I tried using .on() without any success but .live() worked perfectly, thanks. — TheCarver
– TheCarver, Commented Jan 22, 2012 at 16:35
Cheers @Ahmet and Martin.. feel free to accept SKS answer it's exactly my intention plus great demo. — user447356
– user447356, Commented Jan 22, 2012 at 22:06

Selvakumar Arumugam · Accepted Answer · 2012-01-22 16:51:10Z

1

You can use .on and specify the container of the link to have it listen after being removed and added again.

Edit: You can read about below approach in their documentation. See under section Direct and delegated events.

See DEMO here

Something like below should work,

$('#myElement').on('click', '#theLink', function() {
  alert('HI!');
});

I think internally jQuery does something like below,

$('#myElement').click (function (e) {
    if (this.id == 'theLink') {
       alert('Hi!');
       e.stopPropogation();           
    }
});

edited Jan 22, 2012 at 16:51

answered Jan 22, 2012 at 16:10

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2012-01-22 17:41:26Z

1

You should probably use jQuery's on() function (jQuery 1.7+). This will allow you to bind the click event to your element regardless of how many times you add and remove it.

For example:

$("#theLink").on("click", function(event){
    //do stuff;
});

Update: For jQuery versions earlier than 1.7 use either bind() or live() (depending on the exact jQuery version). The same syntax applies.

edited Jan 22, 2012 at 17:41

answered Jan 22, 2012 at 16:11

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Joep · Accepted Answer · 2012-01-22 16:14:42Z

0

I think that

$('#myElement').children('id!="myLink"').remove()

Should remove all children of the container div other than the link. However, I'm not sure if the selector expression inside children() is correctly formatted, so it might cause a syntax error. If so, please comment and I'll edit the answer.

edited Jan 22, 2012 at 16:14

answered Jan 22, 2012 at 16:13

Joep

6513 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery - Adding a link to html()

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related