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不存在且始终未定义。当然，有了这个说你可能很想在外面声明你的内容类，它会起作用，但它不是很好的练习，因为你无法预测何时在你的回调中生成你的动态内容并导致错误的代码。最佳做法是将第二个事件处理程序添加到第一个事件处理程序的回调中。

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

3 个答案: