动态生成表单仅返回首个数据，jQuery点击事件失效问题求助

兄弟，这问题我太熟了！你这是踩了重复ID和事件绑定方式错误的坑，难怪只有第一个按钮能工作，咱们一步步来改：

核心问题分析 #

1. 重复使用唯一ID：你给所有"Make Counter"按钮都用了id="makeCounter"，但HTML里ID必须是独一无二的！jQuery通过$('#makeCounter')只能找到第一个元素，后面的按钮自然触发不了事件。
2. 事件绑定嵌套+语法错误：你在makeCounter的点击事件里嵌套绑定cancelID的点击事件，不仅容易重复绑定，还有语法错误（比如show没加括号，选择器写法错误）。

分步修改方案 #

第一步：修正HTML的ID为Class #

把所有重复的ID改成Class，保留data-id来传递唯一标识：

<div class="wojo top right floated div">
<?php if (!$row->counter_offer): ?>
<a class="makeCounter 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 class="cancelCounter 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>

第二步：修正JS的事件绑定逻辑 #

换成更稳妥的事件绑定方式，分离嵌套逻辑，修正语法错误：

$( document ).ready( function() {
    $('.wojo_form').hide();

    // 绑定所有Make Counter按钮的点击事件
    $('.makeCounter').on('click', function() {
        const offerId = $(this).data('id');
        // 显示对应表单，隐藏当前按钮和Reject按钮
        $('#formID' + offerId).show();
        $(this).hide();
        $('#rejectID' + offerId).hide();
    });

    // 用事件委托绑定Cancel按钮，兼容动态生成的元素
    $(document).on('click', '.cancelCounter', function() {
        const offerId = $(this).data('id');
        // 隐藏表单，显示对应的Make Counter和Reject按钮
        $('#formID' + offerId).hide();
        $('.makeCounter[data-id="' + offerId + '"]').show();
        $('#rejectID' + offerId).show();
    });
});

修改说明 #

1. Class替代重复ID：用class="makeCounter"代替重复的ID，让jQuery能选中所有按钮，通过data-id精准区分每个对应的表单。
2. 分离事件绑定：把Cancel按钮的事件单独拎出来，用事件委托$(document).on('click', '.cancelCounter', ...)，哪怕后续动态新增的按钮也能正常触发事件，避免嵌套绑定导致的重复触发问题。
3. 修正语法错误：补上show()的括号，用精准的属性选择器$('.makeCounter[data-id="' + offerId + '"]')找到对应按钮，替换之前错误的选择器写法。

这样改完之后，所有的Make Counter和Cancel按钮都能正常工作了，你试试！

内容的提问来源于stack exchange，提问作者IZack