如何使用我的 Jquery 代码创建委托事件侦听器答案

【问题标题】：How to create a delegated event listener with my Jquery code如何使用我的 Jquery 代码创建委托事件侦听器
【发布时间】：2016-09-05 05:42:53
【问题描述】：

我正在尝试创建一个委托事件侦听器，以便当用户单击一次时，p 标记被删除并附加一个输入框。在第二次单击时，输入框被删除并附加了 p 标签。

这是我的代码。现在根本没有任何作用。谢谢！

    //User clicks p tag named "#hour1". 
$(document).ready(function(){

    $("document").on('click', "#hour1", function( event ){
        $("#hour1").remove();
        $("#hour1Data").append("<input id='hour1Input' type='text'/>");
    });
    });

//On Second click, input box is sent back to data box.
$(document).ready(function(){
    $("document").on("click", "#hour1Input", function( event ){
        $("#hour1Input").remove();
        $("#hour1Data").append("<p id='hour1'><?php echo $hour1; ?></p>");
    });
});

【问题讨论】：

为什么不只是显示和隐藏而不是追加和删除 - 会简单得多，但正如昆汀所说，您的文档不应该用引号括起来。您也可以将两个事件放入同一个文档中

标签： javascript jquery events delegation

【解决方案1】：

您正在将一个包含选择器的字符串传递给 jQuery，并尝试将事件处理程序绑定到文档中的所有 <document> 元素。这会失败，因为您没有任何内容（因为 HTML 没有任何内容）。

传递 document 对象而不是 "document" 选择器。

【讨论】：