.load（）にロードされたコンテンツが表示されない

ユーザーがカテゴリを選択したときにコンテンツがdivに読み込まれるというスクリプトがあります。私はまたpreタグをクリックすると、テキストを選択してコピーするスクリプトがあります。事はそれはコンテンツが私の英語here a exampleためところで申し訳ありませんが、ロードされ、ここでは、ここに私のコード.load（）にロードされたコンテンツが表示されない

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

出典

2017-04-25 Kevin Lamaque

[OK]を、私は理解し、STHなどを試してみてください。

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

出典

2017-04-25 00:58:03 pirs

感謝を –

plzはそれを受け入れる;） – pirs

.htmlと.txtのファイルが同じドメインにある場合、負荷を使用できる外部URLにはload()メソッドを使用できません。この場合、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>

出典

2017-04-25 02:23:09 Teocci

おかげで、私はその一例を置くが、それは私にあった間違った表現しましたドメインとhttpを使用していない...ちょうどパスが、知っていいです –

私のソリューションは、 'load（）'に基づいて更新されました – Teocci

.load（）にロードされたコンテンツが表示されない

答えて

関連する問題