1

フォーラムを調べましたが、特定の問題の解決策を見つけることができませんでした。モーダル ポップアップ ウィンドウから要素を作成しています。ページに表示することはできますが、クリックできません。

アプリケーションに必要なことを実行できるように、jquery コードを 2 つの別々のファイルで実行しています。

ロード時に各要素にロードされる「編集」アイコンがあります。これは正常に動作し、クリックするとモーダル ボックスが作成され、「ページ 2」が読み込まれます。そこにあるすべての機能は適切に機能します。ユーザーが「更新」をクリックすると、ボックスが閉じて「ページ 1」から「append_elements」関数が起動し、新しいアイコンが読み込まれます。ただし、追加されたばかりのこの編集アイコンはクリックしません。

私はさまざまな場所で on() を使用しようとしましたが、うまくいきませんでした。

ありがとうエリック

ページ1：

$(document).ready(function(){ 
  append_elements();

  $('.cms_edit').on('click', function(){
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask_temp').css({'width':maskWidth,'height':maskHeight});
    $('#mask_temp').fadeIn(1000); 

    var winH = $(window).height();
    var winW = $(window).width();

    var content_object = { 'content' : $(this).parent().html(), 'item_id' :  $(this).parent().data("item") }

    $('#modal_temp').load('/content-edit.php', content_object);

    $('#modal_temp').css('top',  winH/2-$("#modal_temp").height()/2);
    $('#modal_temp').css('left', winW/2-$("#modal_temp").width()/2);      

    $('#modal_temp').fadeIn(500);
  });
});

function append_elements()
{
    $('.cms_edit').appendTo('.editable').show();
}

ページ2：

$('#update').click(function(){
    var value = CKEDITOR.instances['page_text'].getData();
    var item = $('#prev_id').val();

    var elem = '<div class="cms_edit"><em class="icon-edit"></em></div>';

    $('#item_' + item , parent.document).html(value);

    $('#modal_temp', parent.document).fadeOut(500);
    $('#mask_temp', parent.document).fadeOut(500);

    parent.append_elements();
});
4

3 に答える 3

1

変化する

$('.cms_edit').on('click', function(){

に

$('.editable').on('click', '.cms_edit', function(){

jQuery セットはイベントを受け取り、引数として指定されたセレクターに一致する要素にそれを委譲します。これは、ライブを使用する場合とは対照的に、コードを実行するときに jQuery セット要素が存在する必要があることを意味します。

于 2013-06-10T20:02:27.457 に答える
1

イベントを親コンテナーに委任する

$(staticContainer).on('click', '.cms_edit', function(){

staticContainer は、クリック イベントが定義されている要素の最も近い祖先です。

イベントがバインドされた時点でページに既に存在するコンテナーを選択してください。

于 2013-06-10T20:02:51.877 に答える
0

委任されたイベントの使用を検討することをお勧めします。これは次のように行うことができます.on()：

$(document).on('click', '.cms-edit', function(){ ... });

これは何をしますか？

上記のコードは、イベント ハンドラーを委任します。イベント ハンドラーを静的要素、または既に存在するdocument要素 (要素を追加する親など) にアタッチすることにより、現在のすべてのノードと、セレクターに一致する動的に追加される将来のノードにイベントをデリゲートします。これは、AJAX で読み込まれたコンテンツに関しては特に役立ちます。

詳細については、次のリンクを参照してください.on()。

于 2013-06-10T20:06:12.993 に答える