web-dev-qa-db-ja.com

AJAX呼び出しからのHTML戻り内でjQuery関数を呼び出す

JQueryを使用しているWebページで作業しています。サーバーからデータを取得してdivを更新するAjax呼び出しがあります。そのデータの内部にはjQuery関数がありますが、データがページにロードされた後に関数が呼び出されていません。ページに適切なjsファイルがすでに含まれています。

これは、Ajax呼び出しから返され、divに配置されるものです。

<script type="text/javascript">
    $(function() {
         $('input').myFunction('param');             
    }); 
</script>
<p> other html </p>

HTMLがページに挿入された後に返されたJavaScriptを実行するにはどうすればよいですか？

（私はRailsをjRailsプラグインで使用しています）

javascriptjqueryajax
20
wusher

HTMLコンテンツでJavaScriptタグの評価が必要な場合は、ajax呼び出しのdataTypeオプションを "html"に設定する必要があります。

$.ajax({
  type: "GET",
  url: "yourPage.htm",
  dataType: "html"
});

または、.jsファイルをロードして実行する場合は、dataType "script"：

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

詳細はこちら： Ajax/jQuery.ajax

27
CMS

同様の問題があり、ajaxを介して取得しているいくつかのフィールドに小さなjquery日付ピッカーを追加する必要がありました。ここに私がそれを回避するためにしたことがあります...私のajax呼び出しからこのブロック全体を返す代わりに：

<script type="text/javascript">
    $(function() {
         $('input').myFunction('param');                         
    }); 
</script>
<p> other html </p>

私はこれを返します（構成された| x |セパレータに注意してください）

    $(function() {
         $('input').myFunction('param');                         
    }); 

|x|

<p> other html </p>

次に、ajaxを介してデータを受信すると、戻り値を2つの部分に分割します。実行するjavascriptと表示するhtmlです。

 r = returnvalfromajax.split("|x|");       
 document.getElementById('whatever').innerHTML = r[1];  
 eval(r[0]);
7
wilcox00

変化

<script type="text/javascript">
...
</script>

に：

<script>
...
</script>

私の問題を修正しました。

1
JimFing