Home/ Questions/Q 6711081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:05:50+00:00

I have a javascript code (i) that write several <div><a href=…></a></div> inside the <div

  • 0

I have a javascript code (i) that write several <div><a href="..."></a></div> inside the <div id="subsection"> below. Another javascript code (ii) will define that when an <a href="...">Text</a> is clicked, it is transformed into an input box, which will have “Text” as its content.

I know the code (ii) works, because I tested it in a separated page. Also, when I insert it via the Firebug command line, it works, too. But when I write the code in <head>, it doesn’t work.

What is the problem and how do I make it work?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
   <script type="text/javascript">
    $(document).ready(function() {
    $.getJSON('list.php', 
        { method : 'list', value : 'user' },
            function(data) {
                $('#subsection').append("<p><a class='editable'>teste</a><input type='text' id='boo' style='display:none'/></p>");
                $("a.editable").click(function() {
        $(this).parent().find("input").val($(this).text()).focus().show()
        $(this).hide();
        $(this).parent().addClass("edit");

        $("input").keyup(function(event){ 
            var txt = $(this);
            if(event.keyCode == 13){
                txt.parent().find("a").show();
                txt.parent().find("a").text(txt.val());   
                txt.parent().removeClass("edit");
                txt.hide();
            }
            return false;
        });
    });
            });
});
</script>

<section id="items">
    <div id="subsection" class="space"></div>
</section>
</body>
</html>

EDIT:
Ok, I edited to show partially what I’m doing.
Thanks to your help, I made it work.
I get the json content via the getJSON method and mount it.
I think it wasn’t working because I loaded the functions inside $(document).ready() mounted the <div>s, but that modified the DOM. So it wouldn’t work. Then I loaded the functions right after I modified the DOM, and it worked.

Thank you all!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDITED!
    Here is the correct example, if you click on the A you edit the input box passing the link value and hiding the link… if you type enter you hide the input and copy the text to the link.
    I have also added a reference to JQuery.

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>
   <script type="text/javascript">
    $(document).ready(function() {
        $("a.editable").click(function() {
        $(this).parent().find("input").val($(this).text()).focus().show()
        $(this).hide();
        $(this).parent().addClass("edit");

        $("input").keyup(function(event){ 
        var txt = $(this);
        if(event.keyCode == 13){
          txt.parent().find("a").show();
          txt.parent().find("a").text(txt.val());   
          txt.parent().removeClass("edit");
          txt.hide();
          alert(txt.val());
        }

        return false;

      });

            });
        });
    </script>

<section id="items">
    <div id="subsection" class="space">
        the other <div>
        <a class="editable">test link</a>
        <input type='text' id='boo' style="display:none"/>
        </div>s go here
    </div>
</section>
</body>
</html>
    • 0