サイズ変更されたページ - ボタンが送信され、jqueryを使用していません

Question

更新、次のページに移動するときも起こっているようです（今回はフルスクリーン）。

---

私はこのことが私を狂わせるように助けてくれることを願っています。私はそれぞれrowがbuttonである完全オフオーダーtableを持っています。このbuttonの場合、submittedはalertと表示されます。

データテーブル（Responsive）を使用していて、tableがすべて画面に表示されている場合は、buttonが意図したとおりに動作します。ただし、画面のサイズが変更されたときに、buttonが+アイコン内に表示され、rowが展開されます。 buttonはjqueryを実行しておらず、pageを送信しています。

これを修正する方法はわかりませんが、回避策があるかどうか疑問に思っていました。それが役に立つなら、ここにコードのサンプルがあります。ページの一番下に

<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Order Number</th> 
     <th>Button</th> 
    </tr> 
    </thead> 
    <tbody> 
    <?php foreach ($orders as $order): ?> 
     <tr> 
     <th scope="row"> 
      <?php echo $order['OrderNumber']; ?> 
     </th> 
     <td> 
      <form id="<?php echo $order['OrderNumber']; ?>"> 
      <input type="submit" value="Submit"> 
      </form> 
     </td> 
     </tr> 
    <?php endforeach; ?> 
    </tbody> 
</table> 

：

<?php foreach ($orders as $order): ?> 
    <script> 
    $('#<?php echo $order['OrderNumber']; ?>').on('submit', function() { 
     alert('Form submitted!'); 
     return false; 
    }); 
    </script> 
<?php endforeach; ?> 

任意の助けいただければ幸いです！ tableのサイズを変更したときになぜ機能しないのかわかりません。

Answer 1

ねえ、あなたが代わりにdelegated event handlerを使用して、アラート

<table id="datatable-buttons" class="table table-striped table-  bordered dt-responsive nowrap" cellspacing="0" width="100%"> 
<thead> 
<tr> 
    <th>Order Number</th> 
    <th>Button</th> 
</tr> 
</thead> 
<tbody> 
<?php foreach ($orders as $order): ?> 
    <tr> 
    <th scope="row"> 
     <?php echo $order['OrderNumber']; ?> 
    </th> 
    <td> 
     <button type="button" class="btnPress" id="<?php echo $order['OrderNumber']; ?>">Submit</button> 
    </td> 
    </tr> 
<?php endforeach; ?> 
</tbody> 
</table> 

ボトム

<script> 
$('.btnPress').on('click', function() { 
    alert('Form submitted!'); 
    alert(this.id); 
}); 
</script> 

Answer 2

のために、このような何かを試みることができるチームメイト：

$('#datatable-buttons').on('submit', '#<?php echo $order['OrderNumber'];?>', function() { 
    alert('Form submitted!'); 
    return false; 
}); 

あなたのイベントハンドラが動作しないので、宣言時にdomにformが存在しません。

---

しかし、#idに基づいたイベントハンドラはすべて完全には不要です。単一の（委任された）ハンドラで十分です：

$('#datatable-buttons').on('submit', 'form', function() { 
    alert('Form ' + $(this).attr('id') + ' submitted!'); 
    return false; 
});