0

ユーザーデータの編集機能を提供するために、モーダルウィンドウ（Fancybox）でAJAXとフォームを使用するアプリケーションがあります。

edit.php という別のファイルにフォームを設定しました。

<form action="services/update/7" method="post" id="update-form">
  <label>Update the name of this upload</label>
  <input type="text" name="dataname" value="Test Data" />
  <label>Select the theme of this upload</label>
  <select>
    <option value="All">All Themes</option>
    <option value="1">Example Theme 1</option>
    <option value="2">Example Theme 2</option>
    <option value="3">Example Theme 3</option>
  </select>
  <input type="submit" name="submit" value="Save Changes" />
</form>

リンク付きのメインページがあります：

<a href="services/edit/7" id="edit-data">Edit</a>

jQuery を使用してイベントを要素にバインドします。

$("#edit-data").on("click", function(event))
{
  $.fancybox({
    'type': 'ajax',
    'content': $(this).attr('href')
  });
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

フォーム内の送信ボタンに最終バインディングがあります。

$("#update-form input[type='submit']").on("click", function(event))
{
  alert("clicked");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

テスト用に最後のクリック イベントに単純な警告ボックスを追加しましたが、発生しません。

何かご意見は？

ありがとう

4

2 に答える 2

3

イベント委任を使用する.on()

$(document).on("click","#update-form input[type='submit']", function(event)){
  alert("clicked");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

http://api.jquery.com/on/

于 2013-05-15T14:32:41.573 に答える
2

コードを完全に理解していないため、委任を使用する必要があるようです。

$(document).on("click", "#update-form input[type='submit']", function(event))
{
  alert("clicked");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});
于 2013-05-15T14:32:44.233 に答える