Question

我有一个在模态窗口（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;
});

我已经为最终点击事件添加了一个简单的警告框以供测试，但它永远不会被解雇。

有什么想法吗？

由于

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;
});

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

2 个答案: