jQuery: Can't target element that's been added via .append()

Question

I want to wrap words in <p> tag into <span> tags using .append() and then target the <span> tags via:

jQuery(document).ready(function() {
    jQuery('.editable span').bind("mousedown", function() {

        // do stuff to <span> tags...

    });
});

But it doesn't work. As far as I know, $(document).ready() just listen to newly added elements, right? What am I doing wrong?

For testing, here is a jsFiddle. As you can see, the jQuery('.editable span')... part isn't being triggered when you click on the span tags.

Answer 1

Try this ;)

jQuery(document).ready(function() {
    jQuery('.clickme').bind("mouseup", function() {

        // find the bullet content stored in p tag inside li
        var bulletcontent = jQuery(this).parent().find(".editable");

        // split content into words
        var words = jQuery(bulletcontent).text().split(" ");

        // empty p tag
        jQuery(bulletcontent).empty();

        // wrap words in p tag into span tags
        jQuery.each(words, function(i, v) {
            jQuery(bulletcontent).append(jQuery("<span>").text(v)).append(' ');
        });

        // hide editb .js-trigger-editb button
        jQuery(this).hide();

    });
});



jQuery(document).ready(function() {
    jQuery('.editable').on("mousedown", "span", function() {
    
       // don't add full stop at the end of sentence if it already ends with
       var endChars = [".", "?", "!"];
    
       jQuery(this).fadeOut(function(){
          var parentObj = jQuery(this).parent();
          jQuery(this).remove();
          var text = parentObj.find("span").first().html();
          parentObj.find("span").first().html(ta_capitalizeFirstLetter(text)); 
          text = parentObj.find("span").last().html();
          if ( endChars.indexOf(text.slice(-1))  == -1 )
          {
            parentObj.find("span").last().html(text+"."); 
          }
       });
    
    });
});

function ta_capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable">
    Hello world! 進撃の巨人 What isn't reality? 
</div>

<div class="clickme">
CLICK ME
</div>

As per the comment if editable class is not on page load

jQuery(document).ready(function() {
    jQuery('.clickme').bind("mouseup", function() {

        // find the bullet content stored in p tag inside li
        var bulletcontent = jQuery(this).parent().find('.hello');

        // split content into words
        var words = jQuery(bulletcontent).text().split(" ");

        // empty p tag
        jQuery(bulletcontent).empty();
        
        jQuery(bulletcontent).addClass('editable');

        // wrap words in p tag into span tags
        jQuery.each(words, function(i, v) {
            jQuery(bulletcontent).append(jQuery("<span>").text(v)).append(' ');
        });

        // hide editb .js-trigger-editb button
        jQuery(this).hide();

    });
});




jQuery(document).ready(function() {
    jQuery(document).on("mousedown", ".editable span", function() {
    
        // don't add full stop at the end of sentence if it already ends with
        var endChars = [".", "?", "!"];

        jQuery(this).fadeOut(function(){
            var parentObj = jQuery(this).parent();
            jQuery(this).remove();
            var text = parentObj.find("span").first().html();
            parentObj.find("span").first().html(ta_capitalizeFirstLetter(text));
            text = parentObj.find("span").last().html();
            if ( endChars.indexOf(text.slice(-1))  == -1 )
            {
                parentObj.find("span").last().html(text+".");
            }
        });

    });
});

function ta_capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}


function ta_capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello">
    <p>
    
    Hello world! 進撃の巨人 What isn't reality? 
    </p>
</div>

<div class="clickme">
CLICK ME
</div>