1

我有一个项目列表，其中每个项目旁边都有一个打开/关闭按钮。我想切换打开/关闭按钮。这似乎在第一次选择按钮时起作用，但在第二次选择按钮时该功能没有启动。有谁知道为什么？

    //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

因为“点击”仅绑定到您要替换的第一个元素。

蛮力解决方案是使用 live('click', function..) 而不是 click(function..)

但是，我的建议：

  1. 创建一个类，例如“orderbutton”
  2. 将点击绑定到该类，如有必要，使用 live
  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

您必须使用 .live 而不是 .click，因为在设置 click 事件时，click 仅适用于 DOM 中的元素。实时订阅也会查找 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

在替换元素时，您应该委托click事件，请尝试以下操作：

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

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

几点（主要是扩展 Aadaam 的）：

  1. 不要生成带有硬编码到选择器中的订单号的 JavaScript - 事实上，根本不要将订单号放入 id 中，否则您将不必要地为每个按钮重复相同的代码。

  2. 由于打开和关闭按钮是相同的保存 id （你不应该像第 1 点那样使用它）和文本，不要替换按钮，而只是切换文本和一个类作为标记：

（注意：不要对样式进行硬编码，并且内部跨度上的类似乎是不必要的。您可以在 CSS 中使用km-buttom > span来选择它。）

例子：

<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 回答
0

为什么不使用 jquery slidetoggle

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