jQuery：无法定位通过.append（）添加的元素

Question

我希望使用<p>将<span>标记中的字词包装到.append()代码中，然后通过以下代码定位<span>代码：

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

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

    });
});

但它不起作用。据我所知，$(document).ready()只是听新添加的元素，对吧？我究竟做错了什么？

对于测试，这是一个jsFiddle。如您所见，单击span标记时未触发jQuery('.editable span')...部分。

Answer 1

试试这个;）

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

  

根据评论，如果可编辑的课程不在页面加载

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;