Question

我正在使用jQuery将内容动态插入div，ID为＆＃34; target＆＃34;。 jQuery应该在单击链接时运行，但它不起作用。为什么这段代码不起作用？

HTML：

<div id="options" name="onclick-dropdown">
<p style="" id="discussion-opener"><a href="#" name="add-a-comment">Add a comment</a> or 
<a href="#" name="start-discussion" id="start-discussion">start a new discussion</a>.</p>
</div>
<div id="target"></div>

JS：

$("#start-discussion").click(function(e){
  $("#target").html("<div class='dropdown'><textarea style='font-family:latine; text-align:justify; width:250px; height:400px;'></textarea></div>");
  e.preventDefault();
});

Answer 1

您提供的代码按预期工作。我认为您的问题是您没有等待DOM在您的jQuery代码中准备就绪。

$(document).ready(function () {

    $("#start-discussion").click(function (e) {
        $("#target").html("<div class='dropdown'><textarea style='font-family:latine; text-align:justify; width:250px; height:400px;'></textarea></div>");
        e.preventDefault();
    });

});

FIDDLE

准备好的文档将在您添加eventHandler时确保您的元素在DOM中。当您使用ID选择器时，这是必需的。

Answer 2

您的代码位于标题中，但不在doc ready处理程序中，因此无法找到它引用的元素（例如$("#start-discussion")与尚未加载的任何内容不匹配）：

$(function(){

    $("#start-discussion").click(function(e){
      $("#target").html("<div class='dropdown'><textarea style='font-family:latine; text-align:justify; width:250px; height:400px;'></textarea></div>");
      e.preventDefault();
    });

});

注意：$(function(){});是$(document).ready(function(){});

的便捷快捷方式

另一种选择是将您的脚本包含在body元素的末尾，这样您也可以保证DOM已准备就绪。

最后一个选项是拥有一个委托事件处理程序，因为document元素始终存在，而选择器仅在事件时使用。

$(document).on('click', '#start-discussion', function(){
      $("#target").html("<div class='dropdown'><textarea style='font-family:latine; text-align:justify; width:250px; height:400px;'></textarea></div>");
      e.preventDefault();
});

这个仍然可以进入head元素，没有DOM就绪处理程序，仍然可以工作。：）

jQuery .html（）没有插入内容

2 个答案: