单击事件未绑定到fancybox中加载的内容

Question

我有一个应用程序，它使用 AJAX 和模式窗口 (Fancybox) 中的表单来为用户数据提供编辑工具。

我在一个单独的文件中设置了表单 - 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;
});

我在最终点击事件中添加了一个简单的警报框以进行测试，但它从未被触发。

有什么想法吗？

谢谢

Answer 1

通过.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/

Answer 2

看起来你必须使用委托，不确定因为我不完全理解你的代码：

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