$(“#submit”)。クリックしてページの読み込みを妨げない

user3550367

これは本当に私を狂わせています...;)

各行に[削除]ボタンのテーブルがあります。コードは次のとおりです。

while( $row=mysqli_fetch_row($result) ){
        echo'<tr id="'.$row[0].'" >';
        echo'<td id="colx">'.$row[1].'</td>';
        echo'<td id="CellTextBeschreibung">'.$row[5].'</td>';
        echo'<td id="CellTextLong">'.$row[3].'</td>';
        echo'<td id="CellTextLat">'.$row[4].'</td>';
        ?>
        <td><input type="button" onclick="ShowOnMap( <?php echo $row[0];  ?> )" value="Zeigen"></td>
        <td ><?php echo( $row[6]); ?></td>
        <td>
            <FORM id='deleteform' action='delete.php' method='post'>
                <INPUT type='hidden' name='mapid' value='<?php echo( $row[0]); ?>'>
                <INPUT type='hidden' name='userid' value='<?php echo( $row[2]); ?>'>
                <INPUT type='hidden' name='aktuuserid' value='<?php echo( $userID); ?>'>
                <INPUT id='subdel' type='submit' OnClick="return confirm('Löschen.Bist Du sicher?');" value='Löschen'>
            </FORM>
        </td>   
        <td id="colx"> <?php echo( $row[7]); ?>  </td>
        <td id="colx"> <?php echo( $row[8]); ?>  </td>
        </tr>
        <?php
    }

私はこのJqueryコードで送信ボタン(FORM)をcachしようとしています:

$("#subdel").click( function() {
    $.post( $("#deleteform").attr("action"), $("#deleteform").serializeArray(), function(info){alert(info); document.location.reload(true); });
    $("#deleteform").submit( function() {
        return false;   
    });
});

しかし、それは機能していません... ...それは「delete.php」ページをロードし、元のページに戻りません...

私はSAVINGの同じコードを持っていますが(テーブルにはありません)、これは機能していません...

これについての助けをいただければ幸いです...よろしくお願いします... :)

ps:これが機能するSAVE関数です:

<FORM id='eingabeform' action='save.php' method='post'>
        <INPUT type='hidden' name='userid' value='<?php echo( $userID); ?>'>
        <INPUT type='hidden' name='username' value='<?php echo( $aktuuser); ?>'>
        <INPUT type='hidden' id='inputicon' name='icon' value='1'>  
        <INPUT type='hidden' id ='long' name='long' maxlength='20' >
        <INPUT type='hidden' id ='lat'  name='lat' maxlength='20' >
        <div>Beschreibung: <INPUT type='text' id ='longlattext'  name='longlattext' maxlength='300' ></div>
        <div>Link (bei Bearf):<INPUT type='text' id ='link'  name='link' maxlength='300' ></div> 
    <br>
        <INPUT id='submit' type='submit' value='Speichern'>     <INPUT id='abbrechen' type='Button' value='Schließen'  onclick="Hide('Lmenuinput')">
    </FORM>

および関連するJqueryコード:

$("#submit").click( function() {
    $.post( $("#eingabeform").attr("action"), $("#eingabeform").serializeArray(), function(info){alert(info); if (!info=="Du musst auf der Karte einen Punkt anklicken" || !info=="Das ist kein Link! Check das bitte mal, ThX.. ;)") {document.location.reload(true); }});
    $("#eingabeform").submit( function() {
        return false;   
    });
});

ご覧のとおり、これは同じです...これは機能しています...唯一の違いは、上記のDELETE FORMがテーブル内で乗算され、SAVEFORMが乗算されないことです...これはこのエラーに関連している可能性がありますか?

これがdelete.phpです:

<?php

        include 'DBconn.php';
         // ******* TabelleKopf speichern *****************************
        $sql="DELETE FROM `map` WHERE mapID=".$_POST[mapid];
        if (!mysqli_query($con,$sql))
        {
            die('Fail: ' . mysqli_error($con));
        }
        echo "Success";
        mysqli_close($con);
    }

?>
ボリス

<input type="submit" />デフォルトでクリックすると、フォームが送信されます(そしてページが更新されます)。したがって、別のページに移動しないようにする場合は、別のタイプのボタンを使用する<input type="button" />、jQueryに実装されて<button />いるデフォルトのイベントを防止しますe.preventDefault()

$("#subdel").click( function(e) {
    $.post( $("#deleteform").attr("action"), $("#deleteform").serializeArray(), function(info){alert(info); document.location.reload(true); });
    e.preventDefault();
});

更新:そして、PHPループ内のHTML要素に同じIDを使用していることに気づきました。これは、同じIDを持つ複数の要素があることを意味します。それは非常に間違っています。それが機能していない理由です。同じIDの要素が複数ある場合、jQueryは最初の要素のみを選択しますしたがって、イベントハンドラーは最初のフォームでのみ機能します。ここで非常に簡単な例をテストできます:http//jsfiddle.net/AEm8B/

物事を機能させるために、IDの代わりにクラスを使用することができます。ここにリファクタリングされたフォームの例を示しますが、IDは意味的に間違っているため、ループ全体でクラスに変更する必要があります。IDは一意である必要があります。

<FORM class='deleteform' action='delete.php' method='post'>
                <INPUT type='hidden' class='mapid' value='<?php echo( $row[0]); ?>'>
                <INPUT type='hidden' class='userid' value='<?php echo( $row[2]); ?>'>
                <INPUT type='hidden' class='aktuuserid' value='<?php echo( $userID); ?>'>
                <INPUT class='subdel' type='submit' OnClick="return confirm('Löschen.Bist Du sicher?');" value='Löschen'>
</FORM>

そしてあなたのjQueryコード:

$(".subdel").click( function() {
    var $form = $(this).parents(".deleteForm");
    $.post( $form.attr("action"), $form.serializeArray(), function(info){alert(info); document.location.reload(true); });
});

// If you want use this construction instead of e.preventDefault()
// it's better bind it outside of click handler if you're not going 
// to submit it with traditional means.
$(".deleteform").submit( function() {
   return false;   
});*/

またはe.preventDefaultを使用します(より望ましい場合があります):

$(".subdel").click( function(e) {
        var $form = $(this).parents(".deleteForm");
        e.preventDefault();
        $.post( $form.attr("action"), $form.serializeArray(), function(info){alert(info); document.location.reload(true); });
    });

これは最終的にそれを作るはずです

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

jsはリファラーに基づいてページの読み込みをクリックします

分類Dev

ページの読み込み時に存在しない要素のイベントをクリックします

分類Dev

ページの読み込み後にjsリンクを読み込もうとしています

分類Dev

Enquire.jsを使用してページの読み込み時にクリックハンドラーが登録されないのはなぜですか?

分類Dev

MSBuild-1つのパッケージリファレンスが別のタスクの読み込みを妨げる

分類Dev

ページ読み込み時の自動クリックボタンが機能しない

分類Dev

LibreOfficeの読み込みを妨げるGNUTLSバージョン

分類Dev

Expressjs - 角度の読み込みがインデックスページを読み込まない

分類Dev

ページの読み込み後にjQueryを使用してアンカークリックをトリガーしようとしています

分類Dev

「falseを返す」がonclickでのページの再読み込みを妨げないのはなぜですか

分類Dev

Jqueryクリックトリガーがページの読み込み時にラベルに対して機能しない

分類Dev

特定の時間クリックした後にページが読み込まれないようにする

分類Dev

ページの読み込み時にチェックボックスがすでにオンになっているかどうかを確認します

分類Dev

クリック時とページの読み込み時にスクロールして

分類Dev

ページの読み込み時にチェックボックスが正しく機能しない

分類Dev

[アクティブにする]をクリックして、リンクが指しているページを読み込みます

分類Dev

ページの読み込み時にHTMLボタン/リンクをクリックします

分類Dev

安全なCookieを使用してCloudfrontからアクセスが拒否された場合、CORSヘッダーが返されないため、XHRリクエストからのエラー情報の読み取りが妨げられます

分類Dev

読み込みページで欠落している要素をチェックしています

分類Dev

CSSの新しい 'content-visibility'プロパティは、スクリプトの読み込み動作を妨げますか?

分類Dev

ページの読み込み時に自動的にラジオボタンをクリックします

分類Dev

ページの読み込みを待機していないSelenium

分類Dev

Python SeleniumChromeDriverがページの読み込みを待機していない

分類Dev

Firebase 通知をクリックしてもメッセージが読み込まれない

分類Dev

ページ読み込み時のリンクトリガーが機能しない

分類Dev

バックボーンルーターがページの読み込みで機能しない

分類Dev

$(document).ready()と$ .getScript()を使用して、ページの読み込みが完了した後に外部スクリプトを読み込みます

分類Dev

httpsページのhttpを介したChrome読み込みスクリプト

分類Dev

JQueryを介してページの読み込み時にクリックJSコードをトリガーします

Related 関連記事

  1. 1

    jsはリファラーに基づいてページの読み込みをクリックします

  2. 2

    ページの読み込み時に存在しない要素のイベントをクリックします

  3. 3

    ページの読み込み後にjsリンクを読み込もうとしています

  4. 4

    Enquire.jsを使用してページの読み込み時にクリックハンドラーが登録されないのはなぜですか?

  5. 5

    MSBuild-1つのパッケージリファレンスが別のタスクの読み込みを妨げる

  6. 6

    ページ読み込み時の自動クリックボタンが機能しない

  7. 7

    LibreOfficeの読み込みを妨げるGNUTLSバージョン

  8. 8

    Expressjs - 角度の読み込みがインデックスページを読み込まない

  9. 9

    ページの読み込み後にjQueryを使用してアンカークリックをトリガーしようとしています

  10. 10

    「falseを返す」がonclickでのページの再読み込みを妨げないのはなぜですか

  11. 11

    Jqueryクリックトリガーがページの読み込み時にラベルに対して機能しない

  12. 12

    特定の時間クリックした後にページが読み込まれないようにする

  13. 13

    ページの読み込み時にチェックボックスがすでにオンになっているかどうかを確認します

  14. 14

    クリック時とページの読み込み時にスクロールして

  15. 15

    ページの読み込み時にチェックボックスが正しく機能しない

  16. 16

    [アクティブにする]をクリックして、リンクが指しているページを読み込みます

  17. 17

    ページの読み込み時にHTMLボタン/リンクをクリックします

  18. 18

    安全なCookieを使用してCloudfrontからアクセスが拒否された場合、CORSヘッダーが返されないため、XHRリクエストからのエラー情報の読み取りが妨げられます

  19. 19

    読み込みページで欠落している要素をチェックしています

  20. 20

    CSSの新しい 'content-visibility'プロパティは、スクリプトの読み込み動作を妨げますか?

  21. 21

    ページの読み込み時に自動的にラジオボタンをクリックします

  22. 22

    ページの読み込みを待機していないSelenium

  23. 23

    Python SeleniumChromeDriverがページの読み込みを待機していない

  24. 24

    Firebase 通知をクリックしてもメッセージが読み込まれない

  25. 25

    ページ読み込み時のリンクトリガーが機能しない

  26. 26

    バックボーンルーターがページの読み込みで機能しない

  27. 27

    $(document).ready()と$ .getScript()を使用して、ページの読み込みが完了した後に外部スクリプトを読み込みます

  28. 28

    httpsページのhttpを介したChrome読み込みスクリプト

  29. 29

    JQueryを介してページの読み込み時にクリックJSコードをトリガーします

ホットタグ

アーカイブ