1

PHP で URL 短縮 Web サイトの UserCP を作成していますが、解決できない小さな問題が発生したため、停止しました。

Javascript のライブラリ Jquery を使って、ユーザーが URL を簡単に更新できるようにしたいと考えています。これまでのところ、「編集」ボタン (以下を参照) をクリックすると、テキストがテキスト フィールドに変わり、編集可能になります。これは素晴らしいことです。テキスト フィールドにするプロセスでは、attr() 関数を使用して、テキストをテキスト フィールドにしたボタンのクラス名と ID を変更しました。割り当てた新しい ID を使用すると、$.POST が PHP スクリプトに送信されます。理解していただければ幸いです。以下にコードを表示します。

<?php while($list = $listURLs->fetch_array()) { ?>

<td id="longURL<?= $list['ID']; ?>"><a rel="tooltip" title="<?= $list['longURL']; ?>" target="_blank" href="<?= $list['longURL']; ?>"><?= substr($list['longURL'],0,25); ?></a></td>
        <td id="shortURL<?= $list['ID']; ?>"><input type='text' class='span2' onmouseover="(this.select())" value='http://smurl.es/<?= $list['shortURL']; ?>'/></td>
        <td><?= $list['type']; ?></td>
        <td><?= $time; ?></td>
        <td><?= $list['hits']; ?></td>
        <td><button id="edit<?= $list['ID']; ?>" class='btn btn-warning btn-small' rel='tooltip' title='Edit'><i class="icon icon-edit"></i></button>&nbsp;<button id="del<?= $list['ID']; ?>" class='btn btn-danger btn-small' rel='tooltip' title='Delete'><i class="icon icon-trash"></i></button></td>
    </tr>
        <script type="text/javascript">
            $("button#edit<?= $list['ID']; ?>").click(function() {
            $('#longURL<?= $list['ID']; ?>').html("<input type='text' value='<?= $list['longURL']; ?>' />");
            $('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='prependedInput' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
            $("button#edit<?= $list['ID']; ?>").attr({"class": "btn btn-info btn-small test", "data-original-title": "Click to Save", "id": "save<?= $list['ID']; ?>"});

            });


            $('button#save<?= $list['ID']; ?>').click(function() {
                             alert("testing - DEBUG"); // Save code here
            });
        </script>
    <?php 
        }
    }
     ?>

まだ少し混乱している場合は、attr または別の関数で作成した ID を呼び出す方法を教えてください。

コンソールを確認しましたが、エラーはありません。

4

1 に答える 1

0

次のようにして、デフォルトのonclick動作を防止する必要がありevent.preventDefaultます。

$("button#edit<?= $list['ID']; ?>").click(function(e) {
    e.preventDefault();

    $('#longURL<?= $list['ID']; ?>').html("<input type='text' value='<?= $list['longURL']; ?>' />");
    $('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='prependedInput' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
    $("button#edit<?= $list['ID']; ?>").attr({"class": "btn btn-info btn-small test", "data-original-title": "Click to Save", "id": "save<?= $list['ID']; ?>"});
});
于 2013-06-24T16:58:27.197 に答える