12
要求の後、作成された新しい要素は、jQueryコードのイベントハンドラによって認識されません。AJAXリクエストの後に再ロードするjavascriptファイル
ファイルを再読み込みしてこれらのイベントを再登録する方法はありますか？
A
答えて
20
私はあなたがあなたのajaxリクエストの結果で置き換えられた要素のために登録したイベントは発砲していないということを意味していると思いますか？
使用.live()（http://api.jquery.com/live/参照）は要素に対してイベントを登録するために、その試合ではなく、イベントハンドラが最初であったセレクタの結果より、（AJAXの結果から作成された新しいDOM要素を含む）セレクタ交換されると破壊されます。
$('div.someClass').live('click', function(e){
//do stuff
});
重要で
$('div.someClass').click(function(e){
//do stuff
});
を置き換える：
私はその構文が可能な場合は.on()を使用する必要があり、.bind()に似ているとして、これは明確にするためである.live()を使用してお勧めしてきたものの。重要な情報については、@ jbabeyのコメントのリンクを参照してください。
0
jQueryでは何を認識できないのですか？
jQueryは、リクエストを行うたびにDOMを参照するため、表示される必要があります。しかし、添付されたイベントはありません。
正確には見えないものは何ですか？
P.S .: JavaScriptをリロードすることはできますが、お勧めできません。
0
リクエストコールバックでは、新しく追加または作成されたブロックで機能する関数を呼び出します。
$(document).ready(function(){
$('body').on('click','.someClass',function(){
//do your javascript here..
});
});
0
簡単な方法は、ページの読み込み後に作成されたDOM要素で約結合イベントハンドラました。たとえば、リクエストAJAXの後に新しい<div>ブロックを作成し、onClickイベントをキャッチしたい場合、
//This will work for element that are present at the page loading
$('div.someClass').click(function(e){
//do stuff
});
// This will work for dynamically created element but is deprecated since jquery 1.7
$('div.someClass').live('click', function(e){
//do stuff
});
// This will work for dynamically created element
$('body').on('click', 'div.someClass', function(e){
//do stuff
});
現在のドキュメントを見つけるだろう：http://api.jquery.com/on/
4
この質問をこの問題を解決するための
$.ajax({
success: function(data) {
$('body').append(data);
//do your javascript here to act on new blocks
}
});
3
このコードを私のための完璧な作品..
$("head script").each(function(){
var oldScript = this.getAttribute("src");
$(this).remove();
var newScript;
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = oldScript;
document.getElementsByTagName("head")[0].appendChild(newScript);
});
これは、古いスクリプトタグを削除し、同じSRCで新しいものを作ります（それをリロードする）。
+0
こんにちは！これは素晴らしく、私が必要とするものですが、私のAjaxレスポンスの後に実行する場所です。 –
+0
これは完璧に働いてくれてありがとうございますが、リクエストを処理するのに時間がかかります。同じ方法で全体をリロードする改善された方法があれば提案する –
1
ウェブサイトのパフォーマンスを向上させ、ファイルサイズの合計を減らすために、必要なときにJavaSript（.js）ファイルをロードすることを検討することがあります。 jQueryでは、$ .getScript関数を使用して、実行時または必要に応じてJavaScriptファイルをロードできます。例えば
、
$("#load").click(function(){
$.getScript('helloworld.js', function() {
$("#content").html('Javascript is loaded successful!');
});
});
「負荷」のIDを持つボタンがクリックされたとき、それはJavaScriptの動的ファイル「helloworld.js」をロードします。
はそれを試してみて自分でこの例では 、ロード・ボタンをクリックしたとき、それは「のsayHello（）」関数を含む実行時に、「JS-例/ helloworld.js」をロードします。
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Load Javascript dynamically with jQuery</h1>
<div id="content"></div>
<br/>
<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>
<script type="text/javascript">
$("#load").click(function(){
$.getScript('js-example/helloworld.js', function() {
$("#content").html('
Javascript is loaded successful! sayHello() function is loaded!
');
});
});
$("#sayHello").click(function(){
sayHello();
});
</script>
</body>
</html>
0
var scripts = document.getElementsByTagName("script");
for (var i=0;i<scripts.length;i++) {
if (scripts[i].src)
if(scripts[i].src.indexOf('nameofyourfile') > -1)
var yourfile = scripts[i].src;
}
jQuery.get(yourfile, function(data){
if(data){
try {
eval(data);
} catch (e) {
alert(e.message);
}
}
});
0
あなたはjavascriptファイルをロードするためのloadscriptプラグインを試すことができます。
forexample
$("#load").click(function(){
$.loadScript('path/example.js');
});
or
$.ajax({
success: function(data) {
$.loadScript('path/example.js');
}
});
あなたの問題定義を改善してください。これは役に立たないことを示唆していません！ – Shades88
「jQueryで認識されません」と言うと、イベントハンドラが呼び出されていないということですか？ – StuperUser
正しい答えが得られたら、質問を編集して改善してください。同じ問題を抱えている他の人がそれを見つけたら、この質問が適用されることを理解するでしょう。 –