.load () не показывает загруженный контент

Question

У меня есть сценарий, который, когда пользователь выбирает категорию, он загружает содержимое в div. У меня также есть скрипт, который, если вы нажмете тег pre, выделит и скопирует текст. Дело в том, что не работает, когда контент был загружен, кстати, извините за мой английский вот пример и вот мой код

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

Это содержимое test.html :

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

javascript php html

0

Kevin Lamaque 25 Апр 2017 в 03:33

Answer 1

Хорошо, я понял, попробуйте что-то вроде:

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

0

pirs 25 Апр 2017 в 00:58

Answer 2

Вы не можете использовать метод load() для внешнего URL, который вы можете использовать load, если файлы .html, .txt находятся в одном домене. В этом случае вы должны использовать метод html().

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

< Сильный > UPDATE : Если это не проблема, тогда вы можете использовать load(), но вызывать функцию обратного вызова следующим образом:

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

В этом случае initPreTags() - это метод обратного вызова, который будет выполнен после загрузки содержимого.

Пожалуйста, посмотрите на ваш модифицированный код:

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

0

Teocci 25 Апр 2017 в 03:55

.load () не показывает загруженный контент

2 ответа

Похожие вопросы

Новые вопросы

javascript