unable to access elment after append

Question

I'm using append to add an image to a <p id="p10">

$('#p10').append("<img src='plus.png' id='clicker' />");

I want to reference the image I've added via the append with the toggle:

$('#clicker').toggle(function() {
        // toggle code here
}, function() {
    // toggle code here
});

I cannot access the image element via the id to use the toggle. If I comment out the toggle, the image shows up on the page. As soon as I add the toggle code, the image blinks for a second and then disappears.

What are you trying to do? – Ibrahim Khan Feb 07 '16 at 18:27 — Ibrahim Khan, Feb 07 '16 at 18:27
@Dman100, is the toggle happening on click or other event? – Victor Feb 07 '16 at 18:29 — Victor, Feb 07 '16 at 18:29

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

That is because the version of .toggle that accepts function arguments that should execute serially has been removed. (deprecated since v1.8, removed since 1.9)

.toggle only shows/hides an element now. So calling the .toggle on the clicker just hides it.

For an alternative implementation see What to use instead of `toggle(...)` in jQuery > 1.8?

edited May 23 '17 at 10:28

Community

1
1

answered Feb 07 '16 at 18:29

Gabriele Petrioli

191,379
34
261
317

score 0 · Answer 2 · answered Feb 07 '16 at 18:30

0

var imgTag = "<img>";
    imgTag.attr('src','plus.png');
    imgTag.attr('id','clicker');
    $('#p10').append(imgTag);

    $(imgTag).toggle(function() {
            // toggle code here
    }, function() {
        // toggle code here
    });

answered Feb 07 '16 at 18:30

Jimish Gamit

1,014
5
15

unable to access elment after append

2 Answers2