Question

我是jQuery和JavaScript的新手，我正在尝试开发一个可能不完全合理的网页，但据我所知的jQuery，它似乎是一个快速简单的设计。代码类似于：

<script>
    $(document).ready(function() {

      $("button" ).click(function() {
          $("#target").html('<div><p>Some HTML</p><div id="clickHere"></div><div id="target2"></div></div>');
      });

      $("#clickHere").click(function(){
          $("#target2").html('<p>Replacement HTML</p>');

      });

    });
</script>

<div id="target"></div>

在实际代码中存在样式元素和标识符，但我要使用的一般功能是用户选择内容区域。然后通过第一次单击函数调用生成该内容。在该内容中是进一步的分层，我希望允许用户从中进行选择，然后生成最终级别的内容。我猜测有一些潜在的机制是不允许的 “target2”单击事件以触发从“target”div动态生成的内容。但如果我只是做错了什么，我感谢你的帮助！

Answer 1

这里有几个问题......

首先，当您执行以下操作时出现语法错误：

("button")

要调用jQuery函数，您需要引用jQuery对象：

$("button")

其次，当您在文档的ready处理程序中执行此操作时：

$("#clickHere")

它只会找到当时存在的匹配元素。由于没有，因此没有任何点击处理程序绑定到该元素。相反，您希望使用带有.on()函数的事件委派来绑定到不变的顶级元素。像这样：

$(document).on('click', '#clickHere', function(){
    // ...
});

我对此进行了更多解释here（还有其他更好的和更流行的解释here），但基本上你需要做的是将事件附加到存在于的页面元素时间不会改变。（在这种情况下，document可以很好地完成工作。但任何常见的父元素都可以。）由于事件通过DOM“冒泡”，它仍然会捕获这些点击。但是这样您就不必将处理程序重新附加到将在文档生命后期添加的元素中。（您正在使用这些div元素进行操作。）

第三，这些将导致问题：

<div id="clickHere">

只要页面上有多个具有相同id的元素，HTML就定义无效，并且任何JavaScript的行为都将是未定义的。可能工作，或者可能不工作。

相反，在这种情况下使用类：

<div class="clickHere">

相应地更改jQuery选择器：

$(document).on('click', '.clickHere', function(){
    // ...
});

（可能会出现更多问题，但您至少需要纠正这些问题才能继续。）

Answer 2

使用jQuery动态运行click事件需要on()函数E.G。

$("*").on("click","#target2",function(){
.....do somthing.....
});

我认为这就是你要找的东西。

如果您还需要脚本，请随时询问。

生成后续HTML的jQuery HTML生成

2 个答案: