如何在jQuery上选择动态创建的对象？

Question

//jQuery Code    
$(".content-update").click(function(){
    var contentClass = $(this).attr("href").substring(1);
    var content = $("." + contentClass).html();
    $("#stuff").html(content);
});


$(document).on('click', '#'+contentClass, function(){
    alert("Hi!");
});

//HTML Code
<div class="hiddenContent Wolf"><p><img src="Wolf.png" id="#Wolf"/></p> </div>

这里的内容类是几个HTML内容的类名和ID。 我尝试在单击链接后创建图片，然后单击图片，然后尝试从中产生声音。 到目前为止，我只能使图片出现。 单击图片没有任何反应。 链接在这里。 http://www.theindependentwolf.com/HowlFarm/demos/

到目前为止，我仅添加了狼图片用于测试目的。 谢谢。

Answer 1

未捕获ReferenceError：未定义contentClass

您将contentClass作为局部变量，并且尝试在其局部范围之外访问它。

请按照给定的受限代码尝试以下操作，但可以进行改进。

$(".content-update").click(function(){
    var contentClass = $(this).attr("href").substring(1);
    var content = $("." + contentClass).html();
    $("#stuff").html(content);
    $("#stuff").on('click', '#'+contentClass ,function(){
         alert("Hi!");
    });
});

并更改ID

<div class="hiddenContent Wolf"><p><img src="Wolf.png" id="Wolf"/></p> </div>

Answer 2

也许这会有所帮助

$(".content-update").click(function(){
    var contentClass = $(this).attr("href").substring(1);
    var content = $("." + contentClass).html();
    $("#stuff").html(content);
    //lets move your contentClass click hendler here
    //also you trying add hendler to id not to class ... so "'.' + contentClass" should be used instead
    $(document).on('click', '.'+contentClass, function(){
        alert("Hi!");
  });
});

为什么？ 因为var绑定到创建它的函数。 在此范围之外不可见

Answer 3

contentClass在两个单独的范围内。 由于您是动态生成内容的，因此唯一的选择是将第二个事件处理程序添加到第一个事件处理程序的回调中。 为了清楚地区分：

1. global function scope    

//jQuery Code    
$(".content-update").click(function(){
-----------------------------------------------------------
 2. function scope 
 var contentClass = $(this).attr("href").substring(1);
 var content = $("." + contentClass).html();
 $("#stuff").html(content);
-----------------------------------------------------------
});


$(document).on('click', '#'+contentClass, function(){
 ----------------------------------------------------------
 3. function scope
 alert("Hi!");
 ----------------------------------------------------------
});

提示：每个作用域就像一个私有名称空间。 范围2和3可以访问全局范围，但不能相互访问。 并且由于您在第二个作用域内声明了内容类，因此全局范围内的内容类不存在，并且始终是未定义的。 当然，这样说可能会诱使您在外部声明contentclass，它会起作用，但是它不是一个好习惯，因为您无法预测何时在回调内生成动态内容并导致错误代码。 最佳实践是将第二个事件处理程序添加到第一个事件处理程序的回调中。