Question

我有一个动态创建的表单，在点击事件显示/隐藏提交和取消按钮。它只返回第一个表单数据。我搜索了很多，没有运气。已经尝试过unbind和每个助手。这是代码片段。

<div class="wojo top right floated div">

    <?php if (!$row->counter_offer): ?>

        <a  id="makeCounter" class="wojo positive label"  data-id ="<?php echo $row->id; ?> "     ><?php echo 'Make Counter'; ?></a>



        <form method="post" id="<?php echo "formID" . $row->id; ?>" class="wojo_form" name="wojo_form">  

            <input class="wojo black label"type="text" placeholder="Counter Offer" name="offer">

            <button type="button" data-action="processOffer" name="submitOffer" class="wojo positive label"  
                    data-set='{  "action": "processOffer",                                             
                    "id": <?php echo $row->id; ?>,
                    "current_offer" : "<?php echo $row->offer_price; ?>",
                    "sender_id" : <?php echo $row->sender_id; ?>

                    }'     >Submit Counter</button>
            <a  id="<?php echo "cancelID" . $row->id; ?>" class="wojo negative label" data-id ="<?php echo $row->id; ?> "><?php echo Lang::$word->CANCEL; ?></a>
        </form>




    <?php endif; ?>
    <a id="rejectOffer <?php echo $row->id; ?>" class="rejectOffer" data-set='{ 
       "parent": ".segment",
       "id": <?php echo $row->id; ?>}' data-content="Remove Offer">

        <span    id="<?php echo "rejectID" . $row->id; ?>"   class="wojo negative label"><?php echo 'Reject Offer'; ?></span></a> 

</div>

//

$( document ).ready( function() {

$('.wojo_form').hide();
$('#makeCounter').each(function() {
$(this).unbind('click').click( function() {
      alert($('#makeCounter').attr("data-id")); 
  $('#formID' + $(this).data('id')).show();
  $(this).hide();
   $('#rejectID' + $(this).data('id')).hide();

   $('#cancelID' + $(this).data('id')).click( function() {

  $('#formID' + $(this).data('id')).hide();
//      $('[id = makeCounter] [data('id') = $(this).data('id')] ').show
  $('#makeCounter').show
   $('#rejectID' + $(this).data('id')).show();

});

});
});
});








</script>

它仅适用于第一个还价优惠按钮，而第二个反提供商不做任何事情。请帮忙。我在这里坚持了三天。

Answer 1

根据定义，“ID”属性不能重复！由于JQuery意识到这一点，$('#makeCounter')将只选择具有该ID的第一个匹配项。

此外，无需逐个绑定每个事件，您可以将事件绑定到整个元素类。

要解决此问题，请使用class代替id：

PHP中的

：

<a class="wojo positive label makeCounter"  data-id ="<?php echo $row->id; ?> "     ><?php echo 'Make Counter'; ?></a>

您还需要设置取消按钮，如下所示：

<a  class="wojo negative label cancelButton" data-id ="<?php echo $row->id; ?> "><?php echo Lang::$word->CANCEL; ?></a>

此时，each是不必要的，你可以像这样一次绑定所有这些：

$(".makeCounter").click( function() {
  alert($('#makeCounter').attr("data-id"));
  $('#formID' + $(this).data('id')).show();
  $(this).hide();
  $('#rejectID' + $(this).data('id')).hide();
});

$('.cancelButton').click( function() {
  $('#formID' + $(this).data('id')).hide();
  $('#rejectID' + $(this).data('id')).show();

  // check out the JQuery selector here:
  $('.makeCounter[data-id="'+$(this).data('id')+'"]').show();
});

（您也不需要unbind）

jquery只返回第一个表单数据

1 个答案: