如何在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>

The content class here is the class name and ID for several HTML content. I'm trying to create a picture after clicking on a link and after the picture is clicked, I'm trying to produce a sound from it. So far, I'm able to make only the picture appear. Nothing happens on clicking the picture. Here is the link. http://www.theindependentwolf.com/HowlFarm/demos/

I have added only the wolf picture so far for testing purposes. Thanks.

Answer 1

Uncaught ReferenceError: contentClass is not defined

You have contentClass as local variable and you trying to access it outside its local scope.

Try below as per given limited code, but could be improved.

$(".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!");
    });
});

And also change id

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

Answer 2

maybe this will help

$(".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!");
  });
});

Why? because the var is bind to function where it is created. Its not visible outside this scope

Answer 3

contentClass is in two separate scopes. Since you are generating the content dynamically your only option is to add the second event handler inside the callback of the first event handlers. To clearly differentiate the scopes:

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!");
 ----------------------------------------------------------
});

Tip: Each scope is like a private namespace. Scope 2 and 3 has access to the global scope but not to each other. And since you declared your contentclass inside your second scope, contentclass in your global scope doesn't exist and will always be undefined. Of course with this said you might be tempted to declare your contentclass outside, it would work but its not good practise cause you can't predict when your dynamic content will be generated inside your call back and can lead to buggy code. Best practise is to add the second event handler into the callback of the first event handler.