jQuery、Ajax：HTMLを置き換えることができません

ウェブページにボタンがあります。クリックすると、段落（<p>）がヘッダー（<h1>）に置き換えられます。jQuery、Ajax：HTMLを置き換えることができません

someInfo.html

index.htmlを

<head> 
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> 
    <script src="js/libs/jquery/jquery.js"></script> 
    <script src="js/libs/jqueryui/jquery-ui.js"></script> 
    <script src="js/main.js"></script> 
</head> 
<body> 
    <section> 
     <p id="replaceableP1">This text will be replaced </p> 
     <button id="myButton">Get External Data</button>    
    </section> 
</body>

main.js

$(document).ready(function(){ 

     $("#myButton").click(function(){    
      $.get("someInfo.html", function (data, status){ 
        if (status === "success"){ 
         $('#replaceableP1').html(data); 
        } else { 
         $("#replaceableP1").html("Problem reading data"); 
        } 

       }); 
     }); 
});

：

しかし、私はそれが働いて作るように見えることはできません私は"displayText"でdataを交換した場合、それは要素index.htmlをとのdisplayTextを置き換えますmain.js

に$('#replaceableP1').html(data);：
<h1>This is external data!</h1>

エラーがで発生します。

私はディレクトリからsomeInfo.htmlを削除すると、Webページでも、エラーメッセージを生成しません：問題のデータ読み出し。

コードに問題がありますか？

EDIT：私の悪い、私は$("#myButton").click(function(){

出典

2016-05-09 user2789240

さて、初心者にとっては、中かっこ/角かっこが多すぎます。最後の '}}を削除し、それがうまくいくかどうかを確認してください。 – amdouglas

クリックイベントはないので、ボタンがコンテンツをどのように置き換えるかはわかりません。 – epascarello

AJAXリクエストは、ページがロードされるとすぐに実行されます。つまり、 '$（document）.ready'です。これは動作します：https://jsbin.com/gucawus/ – amdouglas

私が見る二つのことがありますがあります忘れてしまいました。最初はあなたが余分な "}）;"あなたのmain.jsファイルに。もう1つは、.htmlが選択した要素の内部HTMLを置き換えることです。 <p>を<h1>に置き換える場合は、.replaceWithを使用します。例えば

、

$(document).ready(function() { 

    $.get("someInfo.html", function(data, status) { 
     if (status === "success") { 
      $('#replaceableP1').replaceWith(data); 
     } else { 
      $("#replaceableP1").html("Problem reading data"); 
     } 

     }); 
    });

出典

2016-05-09 15:27:03 WonderGrub

まだエラー： 'タイプエラー：コンテキストis null'それはjquery.jsと' $（ '＃replaceableP1'）の行を指します。replaceWith（data）; ' – user2789240

Hmmm。問題を引き起こす他のコードが存在する可能性があります。ここに作業コードのPlunkerリンクがあります... https://plnkr.co/edit/pgdwZM4t8LnDSkAjoGa4?p=preview – WonderGrub

私はあなたに同意します。私は自分のコードで他の何かが間違っていると思います。とにかく、私の質問に答えてくれてありがとう:)私は何かが間違っているかどうかを知るために、ページ全体を再作成しようとします。 – user2789240

$(document).ready(function(){ 
    $('#myButton').click(function(){ 
    $.get("Info.html", function (data, status){ 
      if (status ==="success"){ 
       $('#replaceableP1').html(data); 
      } else { 
       $("#replaceableP1").html("Problem reading data"); 
      } 

      }); 
    }); 
    });

はこれを試してみて、JSファイルがロードされているかどうか確認してください。

出典

2016-05-09 15:50:47

jQuery、Ajax：HTMLを置き換えることができません

答えて

関連する問題