foreach 幾筆數據後，若選擇要在同一頁可編輯，如何將值帶入？

Question

<?foreach ($region_get_all->regions as $key):?>
    // 多筆數據
<?endforeach;?>

假設我透過 foreach 取得多筆數據後
我要的做法是當使用者點擊該筆數據的「編輯」鈕
我會顯示一塊div
上面會有該筆數據的數據，會自動帶入到欄位中

// foreach裡面每筆數據都會有這按鈕
<button
 data-id="<id都不一樣>"
 type="button" class="openRightLayout">編輯</button>

// js
$(".openRightLayout").click(function(e) {
  e.preventDefault();
    var id = e.currentTarget.dataset.id;
  $("#service_range").val(id);
});

// div上，當按下按鈕後的其中一個input：（service_range只有一個）
<div>
<input id="service_range" name="service_range" type="text" value="">
</div>

他這樣竟然不能運行，他沒有把值真的帶入input....

Answer 1

foreach裏的元素都是動態渲染的嗎？也就是說button一開始是不存在的咯？
那你的代碼：

$(".openRightLayout").click(function(e) {
  e.preventDefault();
    var id = e.currentTarget.dataset.id;
  $("#service_range").val(id);
});

實際上就沒有綁定事件成功吧？試試事件委託呢？

$('body').on('click','.openRightLayout',function(){})