ClickイベントがAjax読み込みコンテンツで動作していません

外部HTMLファイルからajaxを使用してコンテンツを読み込み中です。なぜコンテンツをロードした後に、クリックイベントが新しくロードされた要素（ul、li、画像など）のいずれかでsafari（モバイルサファリ）でも動作していない理由がわかりません。しかし、これはmozillaで動作しています。ClickイベントがAjax読み込みコンテンツで動作していません

私はこれの背後にある正確な問題を理解することができません。アドバイス私の解決策をしてください。以下は参考のためのコードです。

注：jquery ready機能の下で以下のコードを使用しています。 jqueryは問題の原因ですか？

var currentBottle = this.title; var request = createRequest（）; if（request == null）{ alert（ "リクエストを作成できません"）; リターン; } request.onreadystatechange = showContent;request.open（ "GET"、currentBottle + ".html"、true）; request.send（null）;

関数showContent（）{ IF（request.readyStateの== 4）{ IF（request.statusの== 200）{ のdocument.getElementById（ "food_scroller"）のinnerHTML = request.responseText。 }} }

出典

2010-11-27 user504023

これは重複していますか？ http://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content – Nikkorian

サファリでは、コンテンツタイプは時々応答タイプがtext/htmlとして設定されていることを確認し、問題ではすることができます。あなたのAJAX読み込みコンテンツには、<script>タグを持たないようにしてください。私はSafariが時々それらを尊重しないと思っています。

たぶん（下記のおcreateRequestとshowContent機能に相当します）互換性のHTMLコンテンツのクロスブラウザをGETするためにjQueryの$.load()を使用しよう：私は自分自身この問題をしてきた

var currentBottle = this.title; 
$.load(currentBottle + ".html", 
    function(responseText,textStatus,XMLHttpRequest){ 
     $("#food_scroller").html(responseText); 
     //bind you on click events here 
     $("#food_scroller").find("ul, li, images").click(myClickFunction); 
    } 
);

出典

2010-11-27 18:50:22 Steven

+1ロードされたコンテンツには「

。 Ajax経由で新たにロードされたhtmlは、既存のDOM要素を置き換えていても、イベントハンドラに接続する必要があります。そのためには、レンダリングされているすべてのイベントに敏感な要素のハンドラを確立するために、AJAX結果にインクルードする必要があります。

だからあなたのAJAX呼び出しあなたは今、この問題を調査中しかし

$ajaxresult .= '<script>$("#bookbtn").on("click",function(){doit($(this))});</script>'."\n";

を追加する必要が

$ajaxresult = '<button class="bookbtn" id="bookbtn" type="button" >Book</button>';

を返す場合、たとえば、私はhttp://api.jquery.com/on/に次のように読んで：

イベントハンドラは、現在選択されている要素にのみバインドされています。コードが.on（）を呼び出すときにはが存在する必要があります。要素が存在し、選択できるようにするには、要素の後にHTMLマークアップ内のスクリプトを配置するか、文書ハンドラ内でイベントバインディングを実行します。または、委任されたイベントを使用して、イベントハンドラを添付します。

委任イベントには、後でドキュメントに追加される子孫エレメントのイベントを処理できるという利点があります。委任イベントハンドラがアタッチされているときに存在することが保証されている要素を選択すると、委任されたイベントをに頻繁にアタッチして削除する必要がなくなります。この要素は、ハンドラがドキュメント内のすべてのバブリングイベントを監視したい場合は、モデルビューコントローラの設計、またはドキュメントのビューのコンテナ要素です。文書要素のは、他のHTMLをロードする前に文書の先頭にありますので、文書を準備するのを待つことなく、を待たずにそこにイベントを添付することは安全です。

まだ作成されていない子孫要素にイベントを処理する能力に加えて、委任イベントのもう一つの利点は、多くの要素がを監視する必要がありますはるかに低いオーバーヘッドのための彼らの可能性です。 tbodyに1,000行のデータテーブルがある場合、この例のは1000個の要素にハンドラを割り当てます。...

出典

2017-04-11 14:30:42 Nikkorian

ClickイベントがAjax読み込みコンテンツで動作していません

答えて

関連する問題