Question

我有一个javascript代码（i）在<div><a href="..."></a></div>下面写了几个<div id="subsection">。另一个javascript代码（ii）将定义当单击<a href="...">Text</a>时，它将转换为输入框，其中将包含“Text”作为其内容。

我知道代码（ii）有效，因为我在一个单独的页面中进行了测试。此外，当我通过Firebug命令行插入它时，它也可以工作。但是当我在<head>中编写代码时，它不起作用。

问题是什么？如何使其发挥作用？

<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>

编辑：好的，我编辑了部分显示我在做什么。感谢您的帮助，我做到了。我通过getJSON方法获取json内容并挂载它。我认为它没有用，因为我加载了$(document).ready() <div>中{{1}}的函数，但修改了DOM。所以它不会起作用。然后我在修改DOM之后立即加载了函数，并且它工作正常。

谢谢大家！

Answer 1

这可能是在准备好之前尝试操纵DOM的问题。通常情况下，我会使用jQuery的$(document).ready事件处理程序来处理这个问题，但是如果你不想去那条路，那么将代码放在<script>标记的底部就足够了。页面（就在</body></html>之前）。

发布您的实际脚本。看到它可能会有更好的答案。

Answer 2

您使用的是jQuery吗？您是在document.ready或document.onload事件上执行代码还是立即执行？你确定你的代码在执行时找到了什么吗？等待负载evet并执行它。在此帖子中添加代码示例。

Answer 3

EDITED！这是正确的示例，如果单击A编辑输入框，传递链接值并隐藏链接...如果键入enter，则隐藏输入并将文本复制到链接。我还添加了对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>

Answer 4

看起来你的代码是在完全加载HTML主体之前执行的，它可以破坏一些getElementById逻辑，你可以将代码放在一个函数中然后使用：onload =“yourFunction（）;”在你的身体标签

JavaScript代码在通过Firebug插入时有效，但在插入时则无效

4 个答案: