1

それぞれの横に開く/閉じるボタンがあるアイテムのリストがあります。開く/閉じるボタンを切り替えたいのですが。これは、ボタンが最初に選択されたときに機能しているように見えますが、2回目にボタンが選択されたときに機能が開始されません。誰もが理由を知っていますか？

    //update status - close
    $("#close_<?=$order_id?>").click(function(){
        alert('close');
        order_update_type = 'updatestatus';
        order_status = '2';
        order_selected.set("status", order_status); 
        $("#close_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="open_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Re-open</span></a>');      
      });         

//update status - re-open
    $("#open_<?=$order_id?>").click(function(){
        alert('open');
        order_update_type = 'updatestatus';
        order_status = '1';
        $("#open_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="close_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Close</span></a>');            
      });
4

5 に答える 5

3

'click'は、置き換える最初の要素にのみバインドされるためです。

強引な解決策は、click（function ..）の代わりにlive（'click'、function ..）を使用することです。

ただし、私の推奨事項：

  1. 'orderbutton'のようなクラスを作成します
  2. クリックをそのクラスにバインドし、必要に応じてライブで
  3. javascriptから注文IDを取り戻します-PHPからjavascriptコードを生成しないでください（JSONを除く）
  4. 元々隠されていた「折りたたまれた」バージョンを作成します-覚えておいてください、それは別のIDを持っている必要があります（おそらくID属性の代わりにデータ属性を使用する必要があります）
  5. すべてのスタイル定義をインラインスタイルではなくクラスに移動します

編集：

推奨されるHTML：

<a data-align="left" data-orderId="<?$order_id?>" 
    class="km-button orderbutton closed" 
    data-role="button" 
    id="open_<?=$order_id?>">
        <span class="km-text reopen">Re-open</span>
        <span class="km-text close">close</span>
</a>

推奨されるCSSファイル：

.orderbutton {
   float:left; 
   margin:5px;
}
.orderbutton.closed .close {
   display:none;
}
.orderbutton.open .reopen {
   display: none;
}

推奨されるJS：

$('a.orderbutton').live('click', function(){
    var order_id = $(this).data('orderId');
    var is_closed = ($(this).hasClass('closed');
    order_update_type = 'updatestatus';
    order_status = is_closed ? '2' : '1';
    order_selected.set("status", order_status); 


    if ($(this).hasClass('closed')) {
         $(this).removeClass('closed');
         $(this).addClass('open');
    } else if ($(this).hasClass('open')){
         $(this).removeClass('open');
         $(this).addClass('closed');
    }
});

または、短い形式で：

$('a.orderbutton').live('click', function(){
    var order_id = $(this).data('orderId');
    var is_closed = ($(this).hasClass('closed');
    order_update_type = 'updatestatus';
    order_status = is_closed ? '2' : '1';
    order_selected.set("status", order_status); 

    $(this).toggleClass('open', $(this).hasClass('closed');
    $(this).toggleClass('closed', $(this).hasClass('open');
});
于 2012-07-27T10:19:08.143 に答える
1

クリックはクリックイベントの設定時にDOM内の要素に対してのみ機能するため、.clickではなく.liveを使用する必要があります。ライブサブスクリプションは、DOMの更新も検索します。

    //update status - close
    $("#close_<?=$order_id?>").live('click',function(){
        alert('close');
        order_update_type = 'updatestatus';
        order_status = '2';
        order_selected.set("status", order_status); 
        $("#close_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="open_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Re-open</span></a>');      
      });         

    //update status - re-open
    $("#open_<?=$order_id?>").live('click',function(){
        alert('open');
        order_update_type = 'updatestatus';
        order_status = '1';
        $("#open_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="close_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Close</span></a>');            
      });
于 2012-07-27T10:20:02.630 に答える
1

要素を置き換えるときは、クリックイベントを委任する必要があります。次のことを試してください。

$(document).on("click", "#close_<?=$order_id?>", function(){
     // ...      
}); 

$(document).on("click", "#open_<?=$order_id?>", function(){
     // ...      
});
于 2012-07-27T10:23:07.750 に答える
0

jqueryslidetoggleを使用してみませんか

$("#first").slideToggle('slow');
于 2012-07-27T10:24:16.157 に答える
0

いくつかのポイント（主にAadaamの拡張）：

  1. セレクターにハードコードされた注文番号を使用してJavaScriptを生成しないでください。実際のところ、IDに注文番号を入れないでください。そうしないと、ボタンごとに同じコードを不必要に繰り返すことになります。

  2. 開くボタンと閉じるボタンは同じであるため、ID（ポイント1のように使用しないでください）とテキストを保存します。ボタンを置き換えずに、テキストとクラスをマーカーとして切り替えます。

（注：スタイルをハードコーディングしないでください。内側のスパンのクラスは不必要に思えます。km-buttom > span代わりに、CSSで選択できます。）

例：

<a data-align="left" class="km-button" data-role="button" data-order-id="<?=$order_id?>" class="closed"><span>Re-open</span></a>

$('.km-button').click(function() { 
  var $this = $(this);
  var orderId = $this.data('order-id'); // Get Order id if you need it for something
  if ($this.hasClass('closed')) {
    // Do what needed
    $this.find('span').text('Close');
  } else {
    // Do what needed
    $this.find('span').text('Re-open');
  }
  $this.toggleClass('closed');
});

すべての注文ボタンには、.km-button一度にすべてを選択するクラスがあると思います。属性セレクターなどの代替手段が必要になる場合があります[data-order-id]。

于 2012-07-27T10:36:19.077 に答える