CODEWITHSUNDEEP
javascriptjqueryhtmleventstext
Milad
Milad

Reputation: 115

Using jquery click event inside an editable div

I use JQuery to register events for different tags. Here is the code so far:

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.7.js"></script>
    </head>
    <body>
        <p>First Paragraph</p>

        <p>Second Paragraph</p>
        <p>Yet one more Paragraph</p>

        <div><p>another one</p></div>

        <p><strong>big one</strong></p>

        <div contentEditable="true"><p>hello <b>there</b></p></div>

        <script>
            $("p").click(function () { 
                         alert('p tag'); 
                         });

            $("div").click(function () { 
                         alert('div tag'); 
                         });

            $("b").click(function () { 
                         alert('strong tag'); 
                         });

            </script>

    </body>
</html>

I want to develop a simple text editor and want to capture click events so that I can update the state of my buttons (bold, italics, ...). I want the click events to work inside an editable div as well but they only fire once when the div tag is selected and afterwards when the editing begins, clicking anywhere inside that div doesn't fire, even though I have p and b tags inside the div. Is is possible to achieve this using an editable div? Basically I want to be able to know if the cursor is inside a b tag or an i tag so that I can update the state of my buttons.

Upvotes: 1

Views: 1002

Answers (1)

Rafay
Rafay

Reputation: 31043

you can use .one

$("editableDIV").one("click",function(){...});

Upvotes: 1

Related Questions