.load（）不显示加载的内容

I have a scrip that when the user selects a category it will load the content in a div. I also have a script that if you click a pre tag will select and copy the text. The thing is that is not working when the content has been loaded, btw sorry for my english here a example and here here is my code

$(document).ready(function() {
  $("#esto").on("change", function() {
    var vale = this.value
    $("#divcontent").load("http://letraspiolas.com/" + vale + ".html");
  });
});

(function() {
  function selectText(a) {
    var b = document,
      text = a,
      range, selection;
    if (b.body.createTextRange) {
      range = b.body.createTextRange();
      range.moveToElementText(text);
      range.select()
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = b.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range)
    }
  }
  preTags = document.getElementsByTagName("pre");
  for (var i = 0; i < preTags.length; i++) {
    preTags[i].onclick = function() {
      selectText(this);
      document.execCommand("copy")
    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <select id="esto" data-placeholder="select a category...">
    <option value="">select</option>
    <option value="test"> test </option>
    <option value="test1">test1</option></select>

  <div id="divcontent">
    <pre>this text can be select and copy</pre>
  </div>
</body>

This is the content of the test.html:

<h3>title</h3>
<div class="kghjghjg">
  <pre>____i want to select this</pre>
  <pre>_____and this</pre>
  <div class="clear"></div>
</div>

</div>

Ok, i understood, try sth like :

<script type="text/javascript"> 

$(document).ready( function(){

    // load event
    $("#esto").on("change", function(){

        var vale = $(this).val();
        $( "#divcontent" ).load("http://letraspiolas.com/"+vale+".html", function() {
            console( "Loaded." );
        });
    });

    // event on pre tag
    $("body").on("click","pre", function(){
        selectText(this);
        document.execCommand("copy")
    });

});

function selectText(a){

    var b=document,text=a,range,selection;
    if(b.body.createTextRange){
        range=b.body.createTextRange();
        range.moveToElementText(text);
        range.select()
    }
    else if(window.getSelection){
        selection=window.getSelection();
        range=b.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range)
    }
}

</script>

You can not use the load() method for an external url you can use load if the .html, .txt files are in the same domain. In this case you have to use the html() method.

$("#divcontent").html('<object data="http://letraspiolas.com/' + vale + '.html">').promise().done(function() {
  console.log('Loaded');
  initPreTags();
});

UPDATE: If that is not the problem then you can use load() but calling a callback function like this:

$("#divcontent").load("http://letraspiolas.com/" + vale + ".html", initPreTags());

In this case initPreTags() is the callback method that will be executed after the content has been loaded.

Please take a look to you modified code:

$(document).ready(function() {
  $("#esto").on("change", function() {
    var vale = this.value
    $("#divcontent").load("http://letraspiolas.com/" + vale + ".html", initPreTags());
  });

  function initPreTags() {
    console.log('Loaded');
    var preTags = document.querySelectorAll('pre');
    preTags.forEach(function(preTag){
      preTag.addEventListener('click', function() {
        selectText(this);
        document.execCommand('copy');
      });
    });
  }


  function selectText(a) {
    var b = document,
      text = a,
      range, selection;
    if (b.body.createTextRange) {
      range = b.body.createTextRange();
      range.moveToElementText(text);
      range.select()
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = b.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range)
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <select id="esto" data-placeholder="select a category...">
    <option value="">select</option>
    <option value="test"> test </option>
    <option value="test1">test1</option></select>

  <div id="divcontent">
    <pre>this text can be select and copy</pre>
  </div>
</body>

</div>