how to hide image that is added dynamically

Question

0.00/5 (No votes)

See more:

Help me!
First, sorry if I ask non-sense question. i am new to jquery. I created one canvas, in that i want to draw image, and when I click on the button image should be hidden. and I written this code.

HTML

<script src="/js/jquery2.0.js"></script>

<body>
    <canvas id="cnv" style="border-style:double;" width="500" height="500" class="cls"></canvas>
    <button id="btn">Click</button>
</body>

This is javascript

JavaScript

function test()
{

        var id="str1";
        can = document.getElementById("cnv");
        ctx = can.getContext("2d");
        
        img.src = "/images/rope.png";
        img.id = id;
        img.onload = function ()
        {
            ctx.drawImage(img, 0, 0);
            $(this).attr("id", id);
        }       
    }

    function clicked()
    {
        $("#str1").hide(5000);
    }

Help me with this.

Posted 8-Apr-13 19:51pm

NachiketM

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-04-08T20:04:00

Solution 1

You are not using the power of jQuery. For example, document.getElementById is not needed, because the jQuery ID selector does it. As to your question: you don't use clicked anywhere in code, so what do your expect?

Try to follow the general pattern of jQuery code, use $( document ).ready:
http://learn.jquery.com/about-jquery/how-jquery-works/[^].

You can add a handled of the click event to the button's element, but the real jQuery pattern is to add it all dynamically, for better isolation of JavaScript from HTML. Here is how:
http://api.jquery.com/click/[^].

—SA

Posted 8-Apr-13 20:04pm

Sergey Alexandrovich Kryukov

Comments

NachiketM 9-Apr-13 2:23am

i appreciate your interest in the question, I can write it, but my issue is to write logic. I am stucked. i forget to add handler. but i written handler for that like

var btn = document.getElementById("btn");
btn.addEventListener("click", clicked, false);

This script is for windows 8 app. now I am in need of right logic.

Sergey Alexandrovich Kryukov 9-Apr-13 2:34am

You can do that, but it defeats the purpose of jQuery. I explained how to do it in jQuery style, please look thoroughly. The problem is simple...
—SA

NachiketM 9-Apr-13 2:24am

and whenever document gets loaded test() is called